Question

当页面加载并且用户触发事件时，javascript启动getJSON查询并从服务器获取JSON字符串。它的形式如下：

[{id:12,type:'car',title:'ferrari'}, {id:17,type:'bicycle',title:'ferrari'}]

所以现在我有了这个JSON字符串。现在我有点卡住了。所以这就是我希望它如何工作的方式：

在我的页面中，我有一个输入文本搜索字段，用户可以在其中键入字母，然后javascript将自动搜索此JSONstring的结果，但仅限于标题。它不应按类型或ID搜索。然后它应该将结果作为JSON返回，其中所有ID和类型仍然存在，然后我可以将其传递给渲染器，渲染器将结果呈现为位于div内的ul元素内的li元素。

我遇到问题的部分是实际的搜索部分。如果我从搜索中得到正确的结果，我知道如何渲染它们。

我已经研究过自动完成插件，但我不能让它们像我想要的那样工作，而且它们并不是真正用于我认为的这样的事情。我更喜欢一个已知安全且无错误的插件。如果你说没有一个好的插件，那么我想我必须自己做。在我再次开始发明轮子之前，我只想知道。

在客户端进行搜索的原因是我认为服务器的压力会减少。原因是它从显示的所有结果开始，因为结果已经被提取，我不想再次查询一些结果。之所以使用ajax获取是因为除非用户执行某个事件，否则它将不会被提取，这将是一个按钮点击。

PS：如果你有建议如何以最有效的方式做到这一点，请随时教育我：）

Answer 1

您必须遍历数组并将标题与搜索查询匹配。您可以使用substr（）或使用indexOf（）匹配或使用Regex进行烹饪。只需返回比赛。

小代码示例：

function AutoComplete(searchquery, data){ 
  var j = 0; var returns = []; 
  for(i in data){ 
    if(data[i].title.indexOf(searchquery) > -1){ returns[j++] = data[i]; } } 
  return returns;
}

这应该让你开始吧？

~~PS：对不起，我不知道如何格式化上面的代码。~~

Answer 2

function searchFromData(searchquery,data) {
var returns = [];
$.each(data,function(){
    if(this.title.indexOf(searchquery) > -1){
        returns.push(this);
    }
});
return returns;
}

我使用的这个功能类似于daan的帖子。

如何：使用JSON进行jQuery自动搜索

2 个答案: