前几天工作比较忙没有过来写，今天趁着有点空我来跟大家一起研究一下搜索提示框联想。Let's take a look at Baidu's search box first. Very plain and simple. As a search engine, the recommended search terms are just convenient for you to use for
further searches.
Logically, my personal feeling is 10, so the ranking should be the first 10 records in reverse order according to the search rate.
There should be a lot of data that can be matched here, but if all are loaded in, it will look very long, and the speed will be slow.
Use of Typeahead
In order to improve efficiency, I chose a mature and easy-to-use search prompt framework, Typeahead.js produced by Twitter.
Source address: https://github.com/twitter/typeahead.js
Typeahead needs to rely on jQuery 1.9+, we first create a simple static page called index.html.
Download jQuery and Typeahead JS.
First build a demo page index.html, the content is as follows.
Basically, the input binding should be seen very clearly. Find the class=typeahead binding method under id=demo.
The hint below is the hint, the main one is source: data source.
var suggestions = ['test1','test2','test3','ceshi1','ceshi2','ceshi3'];
I am hard-coded here. You can use post to go to the background to request data sources.
Then let me see the effect.
I didn't add styles because of testing. You can add your favorite styles if you need it.