aristeidhsP aristeidhsP - 6 months ago 26
Javascript Question

Select first search item without clicking to it in Jquery

Hello I have a html file that has several inputs which are autofilled when a matching item is selected on auto-complete

My html file is:

<table class="table table-bordered">
<ul>
<li><label>Barcode</label>
<input class="form-control" type='text' id='barcodescanr' name='barcodescanr' />
</li>
<li><label>Surname </label>
<input class="form-control" type='text' id='surname_1' name='surname' required/>
</li>
<li>
<label>Name</label>
<input class="form-control" type='text' id='name_1' name='name' required/>
</li>
<li><label>Company Name</label>
<input class="form-control" type='text' id='company_name_1' name='company_name' required/>
</li>
</ul>
</table>


My search looks like this

The autocomplete that fills the input fields is this and it works through barcode scanning

$('#barcodescanr').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'barcodescanr',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 3,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#name_1').val(names[2]);
$('#company_name_1').val(names[3]);
$('#surname_1').val(names[1]);
$('#firm_1').val(names[4]);
$('#info').val(names[5]);
$('#scanbartime').val(names[6]);
$('#id').val(names[7]);
$('#custId').val(names[8]);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});


How could I select the first matching barcode from auto-complete without clicking on that? Thank you

Answer

try this

$('#barcodescanr').change(function(){
     $('#ui-id-1 li:first-child').trigger('click');
 });

or this, when user stop writing

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 5 second for example
var $input = $('#barcodescanr');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  $('#ui-id-1 li:first-child').trigger('click');
}

Play with the value of doneTypingInterval to your liking.

Comments