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

При использовании 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()
});

javascript jquery typeahead.js bloodhound
person Micah    schedule 29.01.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person Micah    schedule 03.02.2015

arrow_upward
0
arrow_downward

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

Однако, если источник remote имеет query (например, пожарный запрос), который получает требуемые результаты как в этом примере, то поле поиска будет заполняться релевантными результатами каждый раз при заполнении поля поиска.

Так что, если у вас есть большой файл 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, и вы установили соединение с базой данных, поэтому ваш пул поиска всегда будет наполнен «релевантными результатами» по запросам пользователя.

person Jam1    schedule 24.04.2015
comment
Если вы используете удаленный доступ, для скорости вы должны: добавить индекс в столбец для полей varchar/char или FULLTEXT для текстовых полей. Если у вас большая таблица БД, используйте LIKE '{$key}%' для поиска правильных терминов или полнотекстовый поиск в BOOLEAN РЕЖИМ со счетом и звездочкой: ПРОТИВ ('{$key}*' В БУЛЕВОМ РЕЖИМЕ). На стороне пользователя сохраните данные в localstorage или indexeddb и снова используйте как локальные данные. - person Salines; 09.04.2016