I am using jquery autocomplete plugin http://ift.tt/1yOgWhm. i want auto complete to show menu and on selection of name it should be able to display price in the price text box,i am using min length of 1. But the problem is i am only able to select option if my first input character matches to the data in ajax response and if i enter a character which is not present in ajax response and then when i hit backspace key to remove the characters and enter new character which matches the data source : ajax response ...the autocomplete menu opens but it stucks and not able to select the option. for example:- I have 6 fruits in my database. Name :Apple Price :50 Name :Mango Price :40 Name :banana Price :30 Name :cherry Price :60 Name :sweetlime Price :40 Name :fig Price :20 so the problem is if i enter a in the first place then i can select apple mango banana and its price is also reflecting in respective textbox but if i enter x in the first place or any value which is not in my database then if i use backspace and again put a then suggestion menu opens showing apple banana mango but when i select it on click or on enter key press then it not populating. I think select method of autocomplete jquery plugin is working for only the very first input which i make,Guys please help,i am stucked at this point.
html code ------------------
<div class="row" id="mrow" >
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
<div class="form-group">
<input type="text" class="required form-control" required placeholder="Name" name="pharmacy_name"/>
<p id="pharma_name" class="error-msg"> </p>
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
<div class="form-group">
<input type="number" class="required form-control" maxlength="3" required placeholder="Quantity" name="pharmacy_quantity" />
<p id="pharma_quantity" class="error-msg"> </p>
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
<div class="form-group">
<input type="number" class="required form-control" required placeholder="Price" name="pharmacy_price"/>
<p id="pharma_price" class="error-msg"> </p>
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
<div class="form-group">
<input id="start_date1" class="required form-control" name="pharmacy_date" type="text" placeholder="Select Delivery Date" readonly='true'>
<p id="pharma_date" class="error-msg"> </p>
</div>
</div>
</div>
Js---------code ---------
$( function() {
$( "#buy_equipment_field" ).autocomplete({
source: function( request, response ) {
var searchData1 = $('#buy_equipment_field').val();
$.ajax( {
url: '/rqb/search_cross_sell_master_data/?service=2&search=' + searchData1,
data: {
q: request.term
},
success: function( data ) {
var tab =[]
for(var i=0;i<data.length;i++)
{
tab.push(data[i].name);
}
response(tab);
var serach_value = $('#buy_equipment_field').val();
$( "#buy_equipment_field" ).on( "autocompleteselect", function( event, ui ) {
var new_variable;
for(j=0;j<data.length;j++){
console.log(tab[j]);
console.log(ui.item.label);
if(tab[j]==ui.item.label)
{
new_variable = j;
}
}
console.log(new_variable);
$('#buy_equipment_price').val(data[new_variable].price);
$('#del_charges').text(data[new_variable].delivery_charges);
$('#dep_charges').text(data[new_variable].deposit);
$('#mini_days').text(data[new_variable].min_days);
$('#buy_equipment_field').val(ui.item.label);
} );
}
} );
},
minLength: 1,
select: function( event, ui ) {
$('#buy_equipment_field').val(ui.item.label);
}
} );
} );
Aucun commentaire:
Enregistrer un commentaire