Bootstrap type ahead auto completion

Keywords: JSON github

Bootstrap type ahead auto completion - imitating Baidu search box effect

Bootstrap-Typeahead.js download address: https://github.com/bassjobsen/Bootstrap-3-Typeahead

Explain:
Before using this plug-in, it uses input+datalist to automatically complete the selection jump effect. It works well in chrome during development, but in other browsers it will
There is a situation where the drop-down box does not appear. After query, it is found that many versions of browsers have poor support for datalist. So we use the bootstrap type ahead plug-in, which is very simple to use. You can directly set source to achieve automatic completion, but our requirements also need to select the alternative options and then automatically jump, which requires not only the content of the display, but also the id of these options. It feels that the type ahead is not very flexible in this respect. After roughly reading the source code and online materials, try to find a solution.

Basic Usage
html:

 <input type="text" id="quz_name" autocomplete="off" data-provide="typeahead"/>

js:

 $('#quz_name').typeahead({
             source: function (query, process) {
                 var parameter = {question: query};
                 $.post('${ctxPath}/n/bizQuestion/getCompQueList', parameter, function (data) {
 //                   Process the returned data
                     var res = data.results;

                     //Method 1: process (display string array directly)
 //                    var results = [];
 //                    for (var i=0;i<res.length;i++){
 //                        results.push(res[i].name + ":" + res[i].id + "");
 //                    }
                       //Method 2: process(json object string array, display needs to be processed in highlighter);
                     var resultList = res.map(function (item) {
                         var aItem = {id: item.id, name: item.name};
                         return JSON.stringify(aItem);
                     });
                     process(resultList);
                 },'json');
             },
             highlighter: function (obj) {
                 //The drop-down list displays the content, and processes the displayed value. return does not change the actual value of obj
                 var item = JSON.parse(obj);
                 var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
                 return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                     return '<strong>' + match + '</strong>'
                 });
             },
             updater: function (obj) {
                //The drop-down list (pre) selects the value, the content displayed in the input box, and the return will change the actual value of obj.
                 var item = JSON.parse(obj);
                 return item.name;
             },
             fitToElement:true,//Adjust dropdown width
             followLinkOnSelect:true,
             itemLink:function (obj) {
                 //You can add a jump link. You need to set the previous property to true, and the source code is location.href = this.itemLink(val); change it to window.open(this.itemLink(val));
                 var item = JSON.parse(obj);
                 return "${ctxPath}/n/bizQuestion/quest_detail/" + item.id + "";
             }
             afterSelect:function(obj){
                 //After selection, obj will be the format returned in the above updater,
                 //In different browsers, there are some differences, some will walk this method twice or even many times. It may be a version problem. The latest version downloaded has this problem. This problem has been raised on github.
                 //The original jump link is handled here. You need to comment multiple this.afterSelect(newVal) under the select method in the source code;
                 //Later, use itemLink instead of here to avoid problems.
                 console.log(obj);
             }
         });

Posted by SteveFrost on Sat, 04 Apr 2020 04:40:59 -0700