När man använder en autocomplete vill man oftast visa en sak för användaren och hantera ett id som inte syns. Om man följer exemplen för jquery ui autocomplete på http://jqueryui.com/demos/autocomplete med ”label” och ”value” kommer ”value” hamna i textrutan när man valt ett item. Kanske lite knasigt men så gör jquery ui autocomplete när servern returnerar både ”label” och ”value”. Om du vill att labeln skall returneras till sökrutan, byt namn på ”value”. (Till tex ”id”.)
Här är ett exempel där vi tar ut poster från en databas som returneras som JSON-objekt. Jag visar inte databasanropet utan hur svaret ser ut
när du skriver ordet ”kalle” i sökrutan. Ett anrop ser då ut såhär direkt till servern: server.php?term=kalle
SERVER.PHP
==========
[
{"label":"Kalle Adamsson","id":"1273"}
,
{"label":"Kalle Bertilsson","id":"784"}
,
{"label":"Kalle Deckarsson","id":"23"}
,
{"label":"Kalle Karlsson","id":"399"}
]
KLIENT.HTM
==========
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>json-test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<!-- LADDA NER FRÅN http://jqueryui.com/download !-->
<link rel='stylesheet' type='text/css' href='../inc/jquery-ui-1.8.16.custom.css' />
<link rel='stylesheet' type='text/css' href='../inc/style.css' />
</head>
<body>
<div>Json test</div>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
// vi lägger på autocomplete-funktionalitet på sökrutan
$('#txtPerson').autocomplete({
source: function( request, response ) {
$.getJSON( "json_server.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
autoFocus:true,
// vi lägger på en event-handler för val av item
select: function( event, ui ) {
$('#texten').text('label:'+ui.item.label+' id:'+ui.item.id);
}
});
});
$('#txtPerson').focus();
})
</script>
<form>
<div class="ui-widget">
<input id="txtPerson" class="ui-autocomplete-input" />
</div>
<textarea id="texten">
</textarea>
</form>
</body>
</html>