在Jquery中选择第一个搜索条目而不点击它(Select first search item without clicking to it in Jquery)

您好，我有一个html文件，它有几个输入，当自动完成时选择一个匹配的项目时，这个输入会被自动填充

我的html文件是：

<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>

我的搜索看起来像这样

填充输入字段的自动完成是这个，它通过条形码扫描工作

$('#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" ); } });

我怎么能从自动完成中选择第一个匹配的条码而不点击它？谢谢

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

最满意答案

尝试这个

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

或者这个，当用户停止写作时

//setup before functions var typingTimer; //timer identifier var doneTypingInterval = 2000; //time in ms, 2 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'); }

根据自己的喜好doneTypingInterval的价值。

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, 2 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.

更多推荐