jquery autocomplete特殊字符串触发器

 松原连伟强_124 发布于 2023-01-06 17:05

我有以下问题:

我必须使用由char"@"触发的jquery进行特殊的自动完成

问题是,如果我用@开始文本框,它可以工作,但如果我写了一些字符后我输入@它不起作用.

它必须如何工作:-i写一些文本我想从"utilizatoriJson"添加某人, - 从"utilizatoriJson"添加某人我必须按@键并且自动完成下拉列表必须是apear, - 之后我从下拉列表中选择某人或我从下拉列表中键入一个完整的标签,它必须放空格让我继续留言

我怎样才能做到这一点 ?

我写的代码:

var utilizatoriJson = <%=utilizatoriJson%>;

$( '#textarea_mesaj_colaborare').autocomplete({
    source: utilizatoriJson

})            .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "
  • " ) .append( "" + item.label + "" ) .appendTo( ul ); } $( '#textarea_mesaj_colaborare').autocomplete("disable"); $('#textarea_mesaj_colaborare').keyup(function(){ if ($('#textarea_mesaj_colaborare').val()[$('#textarea_mesaj_colaborare').val().length-1]==='@'){ var inceput = $('#textarea_mesaj_colaborare').val().length; $( '#textarea_mesaj_colaborare').autocomplete("enable"); } });
  • j809.. 8

    如前所述,这里需要多个单词.

    上面已经提供了到原始源的链接.所以,我想展示我从你怀疑中理解的东西.

    但首先让我知道你是否想要像'@'之后的自动完成一样,以'a'开头的所有标签都应该给出仅以'a'开头的结果,而不是那些包含'a'的结果.

    因为我认为这会更好用,所以我有代码.

    你的HTML

    你的JS

    $(function() {
        //Since you told that labels start with '@'
        var utilizatoriJson = [
            {'label': "@ActionScript",'id':'1'},
            {'label': "@Java",'id':'2'},
            {'label': "@C++",'id':'3'},
            {'label': "@Javascript",'id':'4'},
            {'label': "@Python",'id':'5'},
            {'label': "@BASIC",'id':'6'},
            {'label': "@ColdFusion",'id':'7'},
            {'label': "@Haskell",'id':'8'},
            {'label': "@Lisp",'id':'9'},
            {'label': "@Scala",'id':'10'}
        ];
        function split( val ) {
          return val.split( / \s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
    
        $( "#tags" )
          // don't navigate away from the field on tab when selecting an item
          .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 1,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                var lastword = extractLast(request.term);
                // Regexp for filtering those labels that start with '@'
                var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( lastword ), "i" );
                // Get all labels
                var labels = utilizatoriJson.map(function(item){return item.label;});
                var results = $.grep(labels ,function( item ){
                                 return matcher.test( item );
                            });
                response( $.ui.autocomplete.filter(
                results, lastword ) );
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( " " );
              return false;
            }
          });
      });
    

    工作演示:http://jsfiddle.net/AJmJt/2/

    如果你不想要像我说的那样,那么就不需要RegExp匹配,但是你需要看看单词是否以"@"开头.

    此行为的代码有效:http://jsfiddle.net/rPfY8/1/

    1 个回答
    • 如前所述,这里需要多个单词.

      上面已经提供了到原始源的链接.所以,我想展示我从你怀疑中理解的东西.

      但首先让我知道你是否想要像'@'之后的自动完成一样,以'a'开头的所有标签都应该给出仅以'a'开头的结果,而不是那些包含'a'的结果.

      因为我认为这会更好用,所以我有代码.

      你的HTML

      <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" size="50">
      </div>
      

      你的JS

      $(function() {
          //Since you told that labels start with '@'
          var utilizatoriJson = [
              {'label': "@ActionScript",'id':'1'},
              {'label': "@Java",'id':'2'},
              {'label': "@C++",'id':'3'},
              {'label': "@Javascript",'id':'4'},
              {'label': "@Python",'id':'5'},
              {'label': "@BASIC",'id':'6'},
              {'label': "@ColdFusion",'id':'7'},
              {'label': "@Haskell",'id':'8'},
              {'label': "@Lisp",'id':'9'},
              {'label': "@Scala",'id':'10'}
          ];
          function split( val ) {
            return val.split( / \s*/ );
          }
          function extractLast( term ) {
            return split( term ).pop();
          }
      
          $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
              if ( event.keyCode === $.ui.keyCode.TAB &&
                  $( this ).autocomplete( "instance" ).menu.active ) {
                event.preventDefault();
              }
            })
            .autocomplete({
              minLength: 1,
              source: function( request, response ) {
                  // delegate back to autocomplete, but extract the last term
                  var lastword = extractLast(request.term);
                  // Regexp for filtering those labels that start with '@'
                  var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( lastword ), "i" );
                  // Get all labels
                  var labels = utilizatoriJson.map(function(item){return item.label;});
                  var results = $.grep(labels ,function( item ){
                                   return matcher.test( item );
                              });
                  response( $.ui.autocomplete.filter(
                  results, lastword ) );
              },
              focus: function() {
                // prevent value inserted on focus
                return false;
              },
              select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
              }
            });
        });
      

      工作演示:http://jsfiddle.net/AJmJt/2/

      如果你不想要像我说的那样,那么就不需要RegExp匹配,但是你需要看看单词是否以"@"开头.

      此行为的代码有效:http://jsfiddle.net/rPfY8/1/

      2023-01-06 17:07 回答
    撰写答案
    今天,你开发时遇到什么问题呢?
    立即提问
    热门标签
    PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有