Problems and Solutions of Using bootstrap typeahead Plug in to Realize Automatic Completion of Input Box

According to the use method of typeahead found on the Internet, there is an error in the last step, and the data can be read out from the database, but when the input box displays a prompt, all of them are: underfined. After trying for a long time, I couldn't find out what the problem was. Later 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 call the ajax method directly in the source property to obtain the data source." Remind me, because I call the ajax method directly in source according to the online method.

Looking back at the present ace demo, although there is no example of calling ajax, there are also comments on how to use it, but it is only in English (digression: it is really important to know English for technical purposes.) After 1 turn debugging, it can finally be displayed correctly. The post code is 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 value returned 
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:getOption("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 have, or it will be displayed as underfined
for(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 info
arr.push({ value:str});
}
}
process(arr);
}
}
})
}
}
$('input.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
displayKey: 'value',
source: substringMatcher()// Current version source Property cannot be called directly in the ajax Method to get the data source, and pass the substringMatcher() Method 
});
});
</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=" Name of organization " class="col-xs-10 col-sm-5 typeahead scrollable" value="" autocomplete="off" />