javascript - 在 Jquery 中选择第一个搜索项而不单击它

Question

你好，我有一个 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" );
    }               
 });                        

如何在不点击的情况下从自动完成中选择第一个匹配的条形码？谢谢

Answer 1

试试这个

$('#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 的值。