如何通过自动提取多个值选项中的完整数组来停止jQuery自动完成

时间:2014-06-03 15:33:12

标签: javascript jquery jquery-ui autocomplete

使用jQuery自动完成多个值选项,如何防止每个新单词的自动提示。

问题是当你按下“空格”时会显示整个数组,这会在使用大型数组时减慢(挂起)某些浏览器。

增加.minLength值适用于第一个单词,但是一旦按下空格,它就会显示整个数组。

如何阻止它这样做。

http://plnkr.co/edit/ru7i5kuOWzZ7CYu5KNxr?p=preview

  <script>
      $(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 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 ).data( "ui-autocomplete" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 3,
            source: function( request, response ) {
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
            },
            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;
            }
          });
      });
      </script>

2 个答案:

答案 0 :(得分:2)

您可以在自动完成源方法中检查请求参数中的空字符串,如下所示

 if(request.term===' ')
          {
            response([{value: "Enter Some text to search"}]);
            return false;
          }

看看这个可能有帮助的jqfaq工作样本

答案 1 :(得分:0)

将此litte if语句添加到源函数

      if (extractLast( request.term ).replace(/ /g, "") == "") {
        return false;
      }

这里也是plunker