javascript - 如何做 '@somename' 像 Twitter 功能?

标签 javascript jquery jquery-ui twitter autocomplete

我正在尝试实现类似 Twitter 上的功能。 如果我在文本框中写入@J,则会出现一个列表,其中显示自动完成起始名称“Javascript”、“Java”、“JQuery”。

当我选择 Jquery 时,它应该显示在 TextBox 中。我从 Jquery 获得了自动完成代码。但我无法执行此“@”功能。

下面是我到目前为止所做的代码:

<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>autocomplete demo</title>
            <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
                <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
                <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  


            </head>
            <body> 
                <label for="autocomplete">Select a programming language: </label>
                <input id="autocomplete"> 
                    <script>
var tags = [ "Javascript", "Jquery", "Java" ];
document.getElementById('autocomplete').onkeypress = function (e) {
        if (e.keyCode === 64 ) {        

            $( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
                }
        else
        {
            return false;
        }
    };



                    </script> 
                </body>
            </html>

最佳答案

试试这个:

http://jsfiddle.net/gtnf41co/5/

它检查以@开头的输入值:

if (this.value.search("@") == 0)

然后取出请求项中的@

request.term.replace("@", "") 

关于javascript - 如何做 '@somename' 像 Twitter 功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36616788/

相关文章:

javascript - 由于隐藏按钮,在 IE 中 Enter 不提交表单

javascript - 堆栈中的中间元素

javascript - HTML - 如何在使用 jQuery Mobile css 时做一个方形的普通按钮

php - jquery ui 可选择的复选框

javascript - 如何使用 jQuery 从文本字段获取输入?

javascript - PhotoSwipe 视频

jquery - jQuery 中的输入框动画留下 "trail",有什么办法摆脱它吗?

javascript - 禁用对 div 类的点击,但需要启用对同一嵌套类的点击

javascript - JQuery UI Sortable "CursorAt"更改变量后未更新

javascript - 元素拒绝移动 - jQuery .css