Question

我希望自动完成功能与顺序搜索不是 substring 在JQuery中搜索结果。

以下功能还会检查子串，但我只需顺序搜索。

var data = [
  "Apple",
  "Orange",
  "Pineapple",
  "Strawberry",
  "Mango"
    ];


/*  jQuery ready function. Specify a function to execute when the DOM is fully loaded.  */
$(document).ready(

  /* This is the function that will get executed after the DOM is fully loaded */
  function () {

  /* binding the text box with the jQuery Auto complete function. */
    $( "#fruits" ).autocomplete({
      /*Source refers to the list of fruits that are available in the auto complete list. */
      source:data,
      /* auto focus true means, the first item in the auto complete list is selected by default. therefore when the user hits enter,
      it will be loaded in the textbox */
      autoFocus: true ,

    });
  }

);

Answer 1

jQuery UI有这个例子here

输入a只会返回Apple

var data = [
  "Apple",
  "Orange",
  "Pineapple",
  "Strawberry",
  "Mango"
];


/*  jQuery ready function. Specify a function to execute when the DOM is fully loaded.  */
$(document).ready(

  /* This is the function that will get executed after the DOM is fully loaded */
  function() {

    /* binding the text box with the jQuery Auto complete function. */
    $("#fruits").autocomplete({
      
      
      source: function(request, response) {
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(data, function(item) {
          return matcher.test(item);
        }));
      },


      /* auto focus true means, the first item in the auto complete list is selected by default. therefore when the user hits enter,
      it will be loaded in the textbox */
      autoFocus: true,

    });
  }

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<input type="text" id="fruits" />

使用顺序搜索自动完成JQuery

1 个答案: