According to the usage method of typeahead found online, an error occurred at the last step. The data can be read from the database, but when the prompt is displayed in the input box, it is all displayed as: underfined. After exploring for a long time, I couldn't find out what the problem was. Later, I accidentally found this sentence on http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6: "In the current version of typeahead, it is no longer supported to directly call the ajax method in the source attribute to obtain the data source." I reminded me because according to the online method, I directly call the ajax method in the source.
Looking back at the current ace demo, although there is no example of calling ajax, there are also comments to explain how to use it, but it is in English (off-topic: it is really important to understand English by doing technology.), and after a while, it can finally be displayed correctly. The code is posted as follows:
js code
<script type="text/javascript">jQuery(function($) {//typeahead.js//example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/var substringMatcher = function() {//substringMatcher() method return function findMatches(query, process) {//query is the equipped keyword, processj is the returned value var matches, substringRegex;var params = {"token": getStorage("token"), "flag":0,"name":query};var parameter_str="";for(var key in params){ parameter_str+="&"+key+"="+params[key];} var fullurl=getOption("gykj_host")+"institution/list?"+getOption("gykj_callbackparam")+"="+getOption("gykj_callbackfunc")+parameter_str;$("#submenu_info").html(fullurl);$.ajax({url:fullurl,type:'get',dataType:"jsonp",jsonp:getOptio n("gykj_callbackparam"),jsonpCallback:getOption("gykj_callbackfunc"),async:false,error:function(){alert("list:"+getOption("connectionErrorMessage"));},success:function(data){//$("#submenu_info").html(fullurl);if(data.code==0){var arr,substringRegex;arr=[];substrRegex = new RegExp(query);//This must be, or it still appears as underfinedfor(var item in data.data){var str= data.data[item].name;if (substrRegex.test(str)) {// the typeahead jQuery plugin expects suggestions to a// JavaScript object, refer to typeahead docs for more infoarr.push({ value:str});}}process(arr);}}})}}$('input.typeahead').typeahead({hint: true,highlight: true,minLength: 1}, {name: 'states',displayKey: 'value',source: substringMatcher()//The ajax method cannot be called directly in the source property of the current version, and the substringMatcher() method is used});});</script>html
<!-- inline scripts related to this page --><script src="../assets/js/ace-elements.js"></script><script src="../assets/js/typeahead.jquery.js"></script><input type="text" id="name" placeholder="organization name" value="" autocomplete="off" />
The above is the problem and solution to using the bootstrap typeahead plug-in to automatically complete the input box. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!