автозаполнение с последовательными результатами поиска в JQuery

Question

Я хочу автозаполнение функциональности последовательного поиска не подстроки результатов поиска в 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" />