时间戳

首页 > 解决方案 > Jquery TokenInput 初始字符串搜索

javascript - Jquery TokenInput 初始字符串搜索

问题描述

我使用 jquery Tokeninput 库来实现自动完成功能。我目前正在努力解决我在搜索结果中遇到的问题。当我输入某些内容时，它会返回正在输入的字符的所有单词。我希望它只返回初始字符串匹配的搜索结果。

例如，如果我输入“Na”，它会返回所有带有“ Na ”的单词，例如“Ca na da”、“Fi na ncial”等。

我只希望它返回以“ Na ”开头的单词，例如“ Nation”、“ Na Scar ”等。

我是 JavaScript 新手，在更新此脚本时遇到了麻烦。有人可以帮忙吗？

这是我使用的库 - https://github.com/loopj/jquery-tokeninput/blob/master/src/jquery.tokeninput.js

    $("#demo-input").tokenInput([
  {id: 7, name: "Canada"},
  {id: 11, name: "Financial "},
  {id: 13, name: "Nation"},
  {id: 17, name: "Nascar"},
  {id: 19, name: "USA"},
  {id: 31, name: "Economics"}
]);

标签： javascriptjquery-tokeninput

解决方案

我检查了库代码，我认为您不能传递任何选项来更改默认搜索类型，该类型检查值中是否存在搜索查询。但是，我发现了一个可以使用的方法（IMO ，除非必要，否则您不应该使用）。

这里的工作示例

onResult库允许您通过使用和回调来处理搜索结果，onCachedResult您可以将其用于您的杠杆作用。

$("#demo-input").tokenInput([
  {id: 7, name: "Canada"},
  {id: 11, name: "Financial "},
  {id: 13, name: "Nation"},
  {id: 17, name: "Nascar"},
  {id: 19, name: "USA"},
  {id: 31, name: "Economics"}
], 
{
    onResult: filterSearchResults,
    onCachedResult: filterSearchResults
});

function filterSearchResults(items){
    var query = $("#demo-input").parent().find("ul li input").val().toLowerCase();
    return items.filter(i => i.name.toLowerCase().startsWith(query));
}

推荐阅读