我有一个带有输入字段的html页面。每次在此字段中键入某些内容时，都会使用 jQuery 调用 php 脚本。
此 php 脚本返回一个 JSON，其中包含基于输入字段的特定查询的结果。
这工作正常，我正在console中记录输出。
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var r = jQuery(function($) {
$('#name').keyup(function() {
var input = $('#name').val();
var response = $.getJSON('get_names.php', {input: input});
response.done(function (names) {
console.log(names);
});
});
});
</script>
</head>
<body>
<div><input id="name"></div>
</body>
</html>
现在的问题是，与其记录到 console ，我需要将其与 twitter 引导程序合并 - typeahead.js 中的第一个示例，以便每次使用的 json（states在下面的代码中）都由 php 脚本计算与字段的内容。
$(document).ready(function() {
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
});
});
我一直试图抓住这个价值，但没有任何变化：
jQuery(function($) {
$('#name').keyup(function() {
var input = $('#name').val();
names = $.getJSON('get_names.php', {input: input});
});
});
那么：如何通过使用到目前为止编写的输入调用 php 脚本，使每次发生keyup事件时都更新 JSON？
编辑，更新
尝试
var substringMatcher = function () {
return function findmatches(q, cb) {
var matches, substrRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
// do ajax stuff
// update remote `source` here
$.post("/echo/json/"
// do stuff with `q` : `input`
, {json:JSON.stringify([states, {input:q}])})
.then(function(json) {
var names = json[1];
console.log(names);
$.each(json[0], function (i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({
value: str
});
}
});
cb(matches);
} // `error` handler
, function(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
}); // end of `then`
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'
, 'California','Colorado', 'Connecticut', 'Delaware'
, 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'
, 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana'
, 'Maine', 'Maryland', 'Massachusetts', 'Michigan'
, 'Minnesota', 'Mississippi', 'Missouri', 'Montana'
, 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey'
, 'New Mexico', 'New York', 'North Carolina', 'North Dakota'
, 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island'
, 'South Carolina', 'South Dakota', 'Tennessee', 'Texas'
, 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia'
, 'Wisconsin', 'Wyoming'];
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'categories',
displayKey: 'value',
source: substringMatcher()
});
JSFIDDLE http://jsfiddle.net/guest271314/96d5mzr8/16/
我最终做的是使用 Bloodhound replace，特别是创建一个适当的查询：
var states = new Bloodhound({
...
remote: {
url: 'suggest.php?input=',
replace: function (url, query) {
suggestion.input = query;
return url + suggestion.input;
},
...
}
});
states.initialize();
总之，完整代码如下所示：
$(function(){
var suggestion = {
input: '',
normalized: ''
};
var states = new Bloodhound({
datumTokenizer: function (d){
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'get_names.php?input=',
replace: function (url, query) {
suggestion.input = query;
return url + suggestion.input;
},
filter: function (data) {
return $.map(data, function(company) { return { value: company }; });
}
}
});
states.initialize();
$('#the-basics .typeahead').typeahead({
minLength: 1,
highlight: true
},{
displayKey: 'value',
source: states.ttAdapter()
});
});