问题
I have 3 input fields , 1 for data type and other 2 are its relevant. when i press button in data type field i want to display autocomplete window like this
instead of this
And after select it should look like this
HTML
<tr>
<td><input type="text" id="no_1" class="form-control"></td>
<td><input type="text" data-type="vehicle" id="vehicle_1" class="type form-control"></td>
<td><input type="text" id="type_1" class="form-control"></td>
</tr>
JS
$(document).on('focus','.type',function(){
type = $(this).data('type');
if(type =='vehicle' )autoTypeNo = 1;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'autocomplete.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#no_'+id[1]).val(names[0]);
$('#vehicle_'+id[1]).val(names[1]);
$('#type_'+id[1]).val(names[2]);
}
});
});
回答1:
You need to alter autocomplete.php then to return all 3 values, you can do this in a json array easily http://php.net/manual/en/function.json-encode.php then read the values in your jquery script.
This is your updated JS script
$(document).on('focus','.type',function(){
type = $(this).data('type');
if(type =='vehicle' )autoTypeNo = 1;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'autocomplete.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $.map( data, function( item ) {
//var code = item.split("|");
return {
label: item.no + '-' + item.vehicle + '-' + item.type,
value: item.vehicle,
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
//var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#no_'+id[1]).val(ui.item.data.no);
$('#vehicle_'+id[1]).val(ui.item.data.vehicle);
$('#type_'+id[1]).val(ui.item.data.type);
}
});
});
回答2:
I had issues with presentation. The out put look like this : Is it something like that you want ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
</style>
<body>
<h1>The onclick Event</h1>
<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<table>
<tr>
<td>no:</td>
<td><label for="search">vehicle: </label></td>
<td>type:</td>
</tr>
<tr>
<td><input type="text" id="no_1" class="form-control"></td>
<td><input type="text" data-type="vehicle" id="search" class="type form-control"></td>
<td><input type="text" id="type_1" class="form-control"></td>
</tr>
</table>
<script>
$(document).on('focus','.type',function(){
type = $(this).data('type');
if(type =='vehicle' )autoTypeNo = 1;
//$(this).autocomplete({
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
//here you modify the presentation of the label
item.label=item.no + " - " + item.label + " - " + item.category;
that._renderItemData( ul, item );
});
}
});
var data = [
{ no:"GL-446", label: "truck", category: "4 wheel" },
{ no:"GL-446",label: "andreastr", category: "4 wheel" },
{ no:"GL-446",label: "antaltr", category: "4 wheel" },
{ no:"GL-446",label: "annhhx10tr", category: "Products" },
{ no:"GL-446",label: "annk K12tr", category: "Products" },
{ no:"2A corsica",label: "annttop C13tr", category: "Products" },
{ no:"GL-446",label: "anders anderssontr", category: "People" },
{ no:"GL-446",label: "andreas anderssontr", category: "People" },
{ no:"GL-446",label: "andreas johnsontr", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: /*function( request, response ) {
$.ajax({
url : 'autocomplete.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: trunk,
value: 10,
data : 2
}
}));
}
});
},*/
data,
//autoFocus: true,
minLength: 0,
select: function(event, ui) {
/*var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#no_'+id[1]).val(names[0]);
$('#vehicle_'+id[1]).val(names[1]);
$('#type_'+id[1]).val(names[2]);*/
if(ui.item) {
$( "#no_1" ).attr('value',ui.item.no);
$( "#type_1" ).attr('value',ui.item.category);
}
}
});
});
</script>
</body>
</html>回答3:
Inside success function, you need to form labels like 'GL446 - truck - 4 wheel' and value as 'truck' as per below example -
http://jsfiddle.net/43aeh78L/2/
Probably your success method would look like this-
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0] + "-" + code[1] + "-" + code[2],
value: code[autoTypeNo],
data : item
}
}));
}
Edit:
I guess item object inside response function contains all the 3 values, then you can just append them to form a label String as - code[0] + "-" + code[1] + "-" + code[2]
来源：https://stackoverflow.com/questions/50881027/autocomplete-display-relevant-data-in-autocomplete-window