Update JSON bei jedem Keyup für Twitter typeahead
Ich habe eine HTML-Seite mit einem Eingabefeld. Jedes Mal, wenn etwas in dieses Feld eingegeben wird, wird ein PHP-Skript mit jQuery aufgerufen.
Dieses PHP-Skript gibt eine JSON mit den Ergebnissen einer bestimmten Abfrage basierend auf dem Eingabefeld zurück.
Dies funktioniert gut und ich protokolliere die Ausgabe inconsole
.
<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>
Das Problem ist jetzt, dass anstelle der Anmeldung anconsole
, Ich muss dies mit dem Twitter-Bootstrap zusammenführen - erstes Beispiel in typeahead.js, so dass der json verwendet states
im folgenden code) wird jedes mal vom php script mit dem inhalt des feldes berechnet.
$(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)
});
});
Ich habe versucht, den Wert mit diesem zu erfassen, aber nichts ändert sich:
jQuery(function($) {
$('#name').keyup(function() {
var input = $('#name').val();
names = $.getJSON('get_names.php', {input: input});
});
});
So: Wie kann ich den JSON jedes Mal aktualisieren lassen, wenn einkeyup
Event passiert, indem man das PHP-Skript mit der Eingabe aufruft, die bisher geschrieben wurde?