当前位置： 文江博客话题详情

如何使 jQuery 自动完成仅替换某些单词 - 而不是完整字符串？

发布于 2024-10-08 23:16:43 字数 438 浏览 0 评论 0原文

我正在使用 bassistance.de jQuery 自动完成 功能。

文字如“你好@john” 我设置了“自动完成”功能，仅当字符@出现在单词中时才运行。 但是当我单击所需的项目时，它会替换我的全文。 我该怎么做 - 仅替换“@john”？ 或者也许还有另一个 jQuery 自动完成插件，它有这样的能力？

$('#input_line').autocomplete('data.php', {
   extraParams: {input: function() {
           return GetTextareaWord("input_line");
       }
   }
});
原文

I am using bassistance.de jQuery Autocomplete function.

Have text like "hello to you @john"
I made, Autocomplete run only when character @ is in word.
But when I click on the needed item, it replaces me full text.
How can I do so - to replace only "@john"?
Or maybe there is another Autocomplete plugin for jQuery, which has such ability?

$('#input_line').autocomplete('data.php', {
   extraParams: {input: function() {
           return GetTextareaWord("input_line");
       }
   }
});

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

遮了一弯 2024-10-15 23:16:43

正如您为自动完成插件发布的链接所述

该插件已被弃用，但并未
不再发达了。它的后继者是
jQuery UI 的一部分。

我建议您查看 jQueryUI 自动完成。使用该插件，您可以将自定义事件处理程序绑定到 select 事件（当选择列表中的一项）：

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

取消默认事件（即替换字段的整个值），并使用您自己的逻辑适当地更新字段（在本例中，可能只是将值插入到文本中）用户光标在该时间点所在的字段）。

似乎可行，特别是如果您已经弄清楚如何仅在需要时显示自动完成菜单。

As noted on the link you posted for the autocomplete plugin

This plugin is deprecated and not
developed anymore. Its successor is
part of jQuery UI.

I would recommend checking out jQueryUI autocomplete. With that plugin, you can bind a custom event handler to the select event (fired when an item in the list is selected):

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

Cancel the default event (which is replacing the entire value of the field), and use your own logic to update the field appropriately (in this case, it may be just inserting the value into the text field where the user's cursor is at that point in time).

Seems doable, especially if you've figured out how to only show the autocomplete menu when you want it.

回复 原文
寄与心 2024-10-15 23:16:43

我一直在研究与自动完成标签非常相似的东西。我有一些基本的代码可以工作，但我有点羞于在这里发布，因为它是边缘垃圾。它需要大量的清理和重构，我将在接下来的几天内完成。尽管如此，它以类似于@Andrew建议的方式满足您的需要。

<!DOCTYPE html>
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="../css/smoothness/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.7.custom.min.js"></script>

    <script type="text/javascript">
      $(function() {

        var availableTags = [
          "ActionScript", "AppleScript", "Asp", "BASIC", "C",
          "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
          "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
          "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
        ];       


        function getCaretPosition(e) {

          var p = -1;

          if (document.selection) {
            e.focus();
            var s = document.selection.createRange();
            s.moveStart('character', -e.value.length);
            p = s.text.length;
          } else if (e.selectionStart || e.selectionStart == '0') {
            p = e.selectionStart;
          }                      

          return p;

        }

        function getPreviousCaretPosition(e) {

          var s = e.value;
          var i = getCaretPosition(e) - 1;

          while (i >= 0 && s[i] != ' ') { i = i - 1; }                         
          return i;

        }

        function getTerm(s, p) {                             
          var i = p - 1;          
          while (i >= 0 && s[i] != ' ') { i = i - 1; }                         
          return s.substring(i + 1, p);          
        }


        $( "#tags" )
          .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 2,
            source: function(request, response) {    
              var t = getTerm(this.element[0].value, getCaretPosition(this.element[0])); 
              if (t[0] != '#') {
                return false;
              }

              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, t.substring(1, t.length) ) );

              return true;

            },
            focus: function() {
              return false;
            },           
            search: function(event, ui) {
              return true;
            },
            select: function(event, ui) {             
              var current = getCaretPosition(this);
              var previous = getPreviousCaretPosition(this);                             
              this.value = this.value.substring(0, previous) + 
                ' #' + ui.item.value + ' ' + this.value.substring(current);              
              return false;     

            }
          });

      });
    </script>

  </head>
<body>
  <div id="container">

    <div id="content">
      <div id="main"> 

        <div class="item">
          <div class="title">
            <h2>hash-tag-autocomplete</h2>
          </div>
        </div>

        <div class="item">
          <form class="simpleform">
            <p><textarea id="tags" rows="5" style="width:100%"></textarea><p>
            <p><input type="submit"/><p>
          </form>
        </div>

      </div>
    </div>

  </div>
</body>
</html>

我将在接下来的几天内实现此功能并将其打包为 jQuery 插件。我将尝试发布此代码的新版本作为新答案。

更新

试图获得更干净的东西。您可以使用您喜欢的获取和设置插入符的方式来代替我获得的功能。

<!DOCTYPE html>
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="../css/smoothness/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.7.custom.min.js"></script>

    <script type="text/javascript">
      $(function() {

        var availableTags = [
          "ActionScript",  "AppleScript", "Asp", "BASIC", "C", "C++",
          "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",
          "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
          "Ruby", "Scala", "Scheme"
        ];       

        function getCaretPosition(e) {    
            if (typeof e.selectionStart == 'number') {
                return e.selectionStart;
            } else if (document.selection) {
                var range = document.selection.createRange();
                var rangeLength = range.text.length;
                range.moveStart('character', -e.value.length);
                return range.text.length - rangeLength;
            }
        };   

        function setCaretPosition(e, start, end) {
            if (e.createTextRange) {
                var r = e.createTextRange();
                r.moveStart('character', start);
                r.moveEnd('character', (end || start));
                r.select();
            } else if (e.selectionStart) {
                e.focus();
                e.setSelectionRange(start, (end || start));
            }
        };

        function getWordBeforeCaretPosition(e) {    
            var s = e.value;
            var i = getCaretPosition(e) - 1;
            while (i >= 0 && s[i] != ' ') {
                i = i - 1;
            }             
            return i + 1;    
        };

        function getWordBeforeCaret(e) {  
          var p = getWordBeforeCaretPosition(e);
          var c = getCaretPosition(e);  
          return e.value.substring(p, c);    
        };

        function replaceWordBeforeCaret(e, word) {
            var p = getWordBeforeCaretPosition(e);
            var c = getCaretPosition(e);        
            e.value = e.value.substring(0, p) + word + e.value.substring(c);
            setCaretPosition(e, p + word.length);                     
        };


        $( "#tags" )
          .bind("keydown", function(event) {
            if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 0,
            source: function(request, response) {                 
              var w = getWordBeforeCaret(this.element[0]);  
              if (w[0] != '#') {
                this.close();
                return false;
              }             
              response($.ui.autocomplete.filter(availableTags, w.substring(1, w.length)));                
              return true;             
            },
            focus: function() {
              return false;
            },           
            search: function(event, ui) {
              return true;
            },
            select: function(event, ui) {             
              replaceWordBeforeCaret(this, '#' + ui.item.value + ' ');              
              return false;                   
            }
          }); 
      });
    </script>

  </head>
<body>
  <h2>hash-tag-autocomplete</h2>
  <form>
    <p><textarea id="tags" rows="5" style="width:100%"></textarea><p/
    <p><input type="submit"/><p>
  </form>
</body>
</html>

我非常感谢对此的任何反馈。

I've been working on something very similar to autocomplete tags. I have some basic code working but I'm a bit ashamed to publish here because it is borderline crap. It needs a lot of cleaning and refactoring which I will get to within the next couple of days. Nevertheless it does what you need in a way similar to what @Andrew suggests.

<!DOCTYPE html>
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="../css/smoothness/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.7.custom.min.js"></script>

    <script type="text/javascript">
      $(function() {

        var availableTags = [
          "ActionScript", "AppleScript", "Asp", "BASIC", "C",
          "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
          "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
          "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
        ];       


        function getCaretPosition(e) {

          var p = -1;

          if (document.selection) {
            e.focus();
            var s = document.selection.createRange();
            s.moveStart('character', -e.value.length);
            p = s.text.length;
          } else if (e.selectionStart || e.selectionStart == '0') {
            p = e.selectionStart;
          }                      

          return p;

        }

        function getPreviousCaretPosition(e) {

          var s = e.value;
          var i = getCaretPosition(e) - 1;

          while (i >= 0 && s[i] != ' ') { i = i - 1; }                         
          return i;

        }

        function getTerm(s, p) {                             
          var i = p - 1;          
          while (i >= 0 && s[i] != ' ') { i = i - 1; }                         
          return s.substring(i + 1, p);          
        }


        $( "#tags" )
          .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 2,
            source: function(request, response) {    
              var t = getTerm(this.element[0].value, getCaretPosition(this.element[0])); 
              if (t[0] != '#') {
                return false;
              }

              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, t.substring(1, t.length) ) );

              return true;

            },
            focus: function() {
              return false;
            },           
            search: function(event, ui) {
              return true;
            },
            select: function(event, ui) {             
              var current = getCaretPosition(this);
              var previous = getPreviousCaretPosition(this);                             
              this.value = this.value.substring(0, previous) + 
                ' #' + ui.item.value + ' ' + this.value.substring(current);              
              return false;     

            }
          });

      });
    </script>

  </head>
<body>
  <div id="container">

    <div id="content">
      <div id="main"> 

        <div class="item">
          <div class="title">
            <h2>hash-tag-autocomplete</h2>
          </div>
        </div>

        <div class="item">
          <form class="simpleform">
            <p><textarea id="tags" rows="5" style="width:100%"></textarea><p>
            <p><input type="submit"/><p>
          </form>
        </div>

      </div>
    </div>

  </div>
</body>
</html>

I will get to this functionality within the next couple of days and will package it as jQuery plugin. I will try to publish a new version of this code as a new answer.

UPDATE

Tried to get something cleaner. You can use your preferred way of getting and setting carets instead of the functions I got.

<!DOCTYPE html>
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="../css/smoothness/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.7.custom.min.js"></script>

    <script type="text/javascript">
      $(function() {

        var availableTags = [
          "ActionScript",  "AppleScript", "Asp", "BASIC", "C", "C++",
          "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",
          "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
          "Ruby", "Scala", "Scheme"
        ];       

        function getCaretPosition(e) {    
            if (typeof e.selectionStart == 'number') {
                return e.selectionStart;
            } else if (document.selection) {
                var range = document.selection.createRange();
                var rangeLength = range.text.length;
                range.moveStart('character', -e.value.length);
                return range.text.length - rangeLength;
            }
        };   

        function setCaretPosition(e, start, end) {
            if (e.createTextRange) {
                var r = e.createTextRange();
                r.moveStart('character', start);
                r.moveEnd('character', (end || start));
                r.select();
            } else if (e.selectionStart) {
                e.focus();
                e.setSelectionRange(start, (end || start));
            }
        };

        function getWordBeforeCaretPosition(e) {    
            var s = e.value;
            var i = getCaretPosition(e) - 1;
            while (i >= 0 && s[i] != ' ') {
                i = i - 1;
            }             
            return i + 1;    
        };

        function getWordBeforeCaret(e) {  
          var p = getWordBeforeCaretPosition(e);
          var c = getCaretPosition(e);  
          return e.value.substring(p, c);    
        };

        function replaceWordBeforeCaret(e, word) {
            var p = getWordBeforeCaretPosition(e);
            var c = getCaretPosition(e);        
            e.value = e.value.substring(0, p) + word + e.value.substring(c);
            setCaretPosition(e, p + word.length);                     
        };


        $( "#tags" )
          .bind("keydown", function(event) {
            if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 0,
            source: function(request, response) {                 
              var w = getWordBeforeCaret(this.element[0]);  
              if (w[0] != '#') {
                this.close();
                return false;
              }             
              response($.ui.autocomplete.filter(availableTags, w.substring(1, w.length)));                
              return true;             
            },
            focus: function() {
              return false;
            },           
            search: function(event, ui) {
              return true;
            },
            select: function(event, ui) {             
              replaceWordBeforeCaret(this, '#' + ui.item.value + ' ');              
              return false;                   
            }
          }); 
      });
    </script>

  </head>
<body>
  <h2>hash-tag-autocomplete</h2>
  <form>
    <p><textarea id="tags" rows="5" style="width:100%"></textarea><p/
    <p><input type="submit"/><p>
  </form>
</body>
</html>

I would really appreciate any feedback on this.

回复 原文
~没有更多了~

关于作者

妄想挽回

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文