我有一个带输入字段的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>
现在的问题是，我需要将其与twitter引导程序 - first example in typeahead.js合并，而不是记录到console，以便在下面的代码中使用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});
});
});
那么：每次发生keyup事件时，如何通过使用目前写入的输入调用php脚本来更新JSON？
答案 0 :(得分：1)
修改，更新
尝试
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()
});
答案 1 :(得分：0)
我最终做的是使用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()
});
});