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

Question

Объяснение кода приведено ниже.

Вот автозаполнения я использую (но я рассмотрел 3 других пакетов автозаполнения, и все они ведут себя точно так же):

https://goodies.pixabay.com/javascript/auto-complete/demo.html

А вот как я использую его на на стороне клиента (обратите внимание, что я использую автозаполнение в сочетании с socket.io так что я могу обновить мое автозаполнение, как пользователь вводит в поле поиска):

socket.on('searchBarResults', function(data) { 

var my_autoComplete = new autoComplete({ 
    selector: 'input[name="searchbar4"]', 
    minChars: 1, 
    cache: false, 
    source: function(term, suggest){ 
     term = term.toLowerCase(); 
     var choices = [ 
      data[0]._source.movie 
     ]; 
     var matches = []; 
     for (i=0; i<choices.length; i++) 
      if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]); 
     suggest(matches); 
    } 
}); 

    $searchBar4.on('input', function(event){ 
     my_autoComplete.destroy(); 
    }); 
}); 

так вот что все это происходит: когда пользователь начинает вводить имя фильма, после каждого вводимого слова сервер ищет базу данных для соответствия и отправляет результаты клиенту.

Например: если пользователь ищет Star, сервер отправит обратно Star Trek Неоткрытая Страна и SearchBox покажет вариант автозаполнения под названием Star Trek Неоткрытая Страна.

Это хорошо работает и все.

Если пользователь Star Trek сервер, снова отправить обратно Star Trek Неоткрытой Страны и автозаполнение будет обновляться. Хорошо.

Вот вопрос у меня есть:

Если пользователь Star Страна, сервер будет послать назад Star Trek Неоткрытая Страна, но автозаполнения не будет отображать его.

Автозаполнение отображает результаты, только если слова находятся в порядке (вы не можете пропустить слова).

Как я могу получить автозаполнение до всегда показать результаты с сервера, независимо от того, какой пользователь вводит слова в поле поиска?

Answer 1

Проблема заключается в вашем:

if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]); 

Это удалит все элементы, которые не соответствуют термину.

"Star Trek Undiscovered Country".toLowerCase().indexOf("Star Country")

Она возвращает -1, так как он не содержит, что всю строку. Вам нужно разбить его на слова и сравнить их по одному.

Вы должны быть в состоянии сделать что-то вроде этого:

var match = function(term, suggest){ 
 
     term = term.toLowerCase(); 
 

 
     // for debugging. 
 
     var choices = new Array(); 
 
     choices.push('Star Trek Undiscovered Country'); 
 

 
     var matches = []; 
 
     for (i=0; i<choices.length; i++) 
 
     { 
 
      var allMatches = true; 
 
      var words = term.split(' '); // Split into words and check them individually. 
 

 
      //TODO: Possibly handle case when there is only one word. 
 

 
      for(var y = 0; y<words.length; y++) 
 
      { 
 
       // Check if this word is in choices[i]. 
 
       if (choices[i].toLowerCase().indexOf(words[y]) == -1) 
 
       { 
 
        // Not a match. 
 
        allMatches = false; 
 
        // Possibly continue when allMatches == false, since the following words doesn't matter. 
 
       } 
 
      } 
 
      if(allMatches) 
 
      { 
 
       matches.push(choices[i]); 
 
      } 
 
     } 
 
     suggest(matches); 
 
    } 
 

 
var suggest = function(item){ 
 
    console.log(item); 
 
}; 
 
match('Star Country', suggest); // Returns one item. 
 
match('Star Blaster', suggest); // Returns no items.

Кроме того, он, кажется, как choices всегда будет массив с 1 пункта? Почему вы используете массив для этого?