Typeahead and Bloodhound показывает несвязанные предложения, когда используется «удаленный»

Question

При использовании Typeahead/Bloodhound с дистанционным вариантом, когда результаты локальной/предварительной выборки находятся под «пределом» (5), приведенные предложения не связаны с вводом. Выглядит любит его только показывает из верхней части результатов, установленных до 5.

Фото: «Любовь» это ожидаемый результат, все остальное не имеет никакого отношения:

Мой код:

var keywords = [ 
{"value": "Ambient"}, {"value": "Blues"},{"value": "Cinematic"},{"value": "Classical"},{"value": "Country"}, 
{"value": "Electronic"},{"value": "Holiday"},{"value": "Jazz"},{"value": "Lounge"},{"value": "Folk"}, 
    {"value": "Hip Hop"},{"value": "Indie"},{"value": "Pop"},{"value": "Post Rock"},{"value": "Rock"},{"value": "Singer-Songwriter"},{"value": "Soul"}, 
    {"value": "World"},{"value": "Happy"},{"value": "Sad"},{"value": "Love"},{"value": "Angry"}, 
    {"value":"Joy"},{"value": "Delight"},{"value": "Light"},{"value": "Dark"},{"value": "Religious"},{"value": "Driving"}, 
    {"value":"Excited"},{"value": "Yummy"},{"value": "Delicious"},{"value": "Fun"},{"value": "Rage"}, 
    {"value":"Hard"},{"value": "Soft"} 
    ]; 


// Instantiate the Bloodhound suggestion engine 
var keywordsEngine = new Bloodhound({ 
    datumTokenizer: function (datum) { 
     return Bloodhound.tokenizers.whitespace(datum.value); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: keywords, 
    remote: { 
     url: '/stub/keywords.json', 
     filter: function (keywords) { 
      // Map the remote source JSON array to a JavaScript object array 
      return $.map(keywords, function (keyword) { 
       return { 
        value: keyword.value 
       }; 
      }); 
     } 
    }, 
    prefetch: { 
     url: '/stub/keywords.json', 
     filter: function (keywords) { 
      // Map the remote source JSON array to a JavaScript object array 
      return $.map(keywords, function (keyword) { 
       return { 
        value: keyword.value 
       }; 
      }); 
     } 
    } 
}); 

// kicks off the loading/processing of `local` and `prefetch` 
keywordsEngine.initialize(); 

$('#keyword-search-input').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1 
}, 
{ 
    name: 'keyword', 
    displayKey: 'value', 
    // `ttAdapter` wraps the suggestion engine in an adapter that 
    // is compatible with the typeahead jQuery plugin 
    source: keywordsEngine.ttAdapter() 
}); 

Answer 1

После дальнейших исследований, я думаю, что нужно отфильтровать удаленные предложения вручную, согласно этой теме по вопросам Github для Typeahead.js:

«Итак, идея в том, что я думаю, что данные, возвращаемые с удаленного, уже должны быть отфильтрованы с помощью пульта дистанционного управления, поэтому дальнейшая фильтрация не выполняется».

https://github.com/twitter/typeahead.js/issues/148

Answer 2

Я хотел бы пойти более глубоко на этот вопрос для будущих ссылок. Имейте в виду, что я не эксперт по JavaScript или не специалист по этому вопросу. С двигателем Bloodhound он не поддерживает постоянные динамические взаимодействия с параметром поиска для remoteurl. Из-за этого, если вы используете файл json, в поле поиска typeahead будет отображаться только limit. Поэтому, если limit: 10, тогда будут показаны первые 10 записей из json, и результат не изменится, несмотря на то, что пользователь печатает. Только первая запись json будет содержать предложение, основанное на пользовательских подсказках, которое тривиально.

Однако если remote источника имеет (запрос, например, пожар) в query, который получает необходимые результаты as in this example, то окно поиска будет заполнено соответствующими результатами каждый раз, когда окно поиска заполняется.

Так что, если у вас есть большой файл json, который вы используете в какой-либо базе данных, а не используете prefecth? Очевидно, что для скорости и эффективности вам нужно будет использовать remote. Использование PHP скрипт, который вы должны были бы сделать что-то вроде:

$key=$_GET['key']; 
$con=mysqli_connect("localhost","root",""); 
$db=mysqli_select_db($con, "database_name"); 
$query=mysqli_query($con, "SELECT * FROM table WHERE column LIKE '%{$key}%'"); 
$rows=array(); 
while($row=mysqli_fetch_assoc($query)) 
{ 
    $rows[] = $row; 
} 
echo json_encode($rows);   

Здесь вы получаете значение параметра поиска с помощью GET, и вы создали соединение с базой данных, следовательно, ваш поиск бассейн всегда будет гидратированных с " соответствующие результаты "при запросах пользователя.