Ajax远程调用Json实现自动补全

2016-11-30 You Li 更多博文 » 博客 » GitHub »

Java develop diary Ajax

原文链接 https://liyouvane.github.io/easy-auto-complete/
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


最近一个项目做的是搜索引擎的前端,要实现的是搜索框实时匹配用户输入并且提示相关内容。我们的框架是要在得到query的term之后访问/auto?query=<term>并且获取网页中的json,分析数据以下拉框的方式返回,并且对匹配字符高亮。

<input type="text" name="query" placeholder="Search..." id="autocomplete">
<script>
var options = {
    url: function(phrase) {
        return "http://mysite.com/auto?query=" + phrase ;
    },
};
$("#autocomplete").easyAutocomplete(options);
</script>

增加以上代码就可以实现所需要的效果。如果remote的json格式比较复杂,还需要增加return type的分析。可以参考http://easyautocomplete.com/guide,非常详细。为了实现下拉框还需要在header中添加必要的cssjs文件。