从数据列表中选择项目时触发事件，而不是在键入时

问题描述

我有一个这样的表格:

<input list='data-list' id='list'>
<datalist id='data-list'>
  <option>first</option>
  <option>second</option>
</datalist>

用户可以从数据列表中选择一个项目 - 或者 - 可以输入它自己的值.我通过对 PHP 脚本的 JSON 调用连接到数据库，以在表单的其余部分填写其他信息.我希望当用户在列表输入中键入名称时(因此当内容模糊时)或当用户单击数据列表中的选项时触发.

The user can select an item from the datalist -or- can type in it's own value. I am connection to a database through a JSON call to a PHP script to fill in other information in the rest of the form. I want this to trigger when a user typed a name in the list-input (so when the content is blurred) OR when the user clicked an option from datalist.

使用 $( ':input#list' ).on( 'change', function... 该函数在输入失去焦点时被触发，但是当数据列表中的一个项目被选中它也会等待，直到输入失去焦点，我希望事件立即触发

Using $( ':input#list' ).on( 'change', function... the function is triggered when the input loses focus, but when an item from the data-list is selected it also waits 'till the input loses focus, I want the event to fire straight away

使用 $( ':input#list' ).on( 'input', function... 点击数据列表中的一个项目会立即触发该功能，这正是我想要的，但是输入也会触发事件，每次击键都会向我的 PHP 脚本发送大量不需要的请求.

using $( ':input#list' ).on( 'input', function... clicking an item from the datalist triggers the function straight away, which is what I want, but typing will trigger the event as well, with each keystroke, sending a lot of unwanted requests to my PHP script.

我尝试将事件直接绑定到数据列表，但没有奏效.

I have tried binding an event to the datalist directly, but that didn't work.

我希望在用户单击(或使用键盘选择)数据列表中的项目或用户输入单词并移至下一个输入时触发该功能.

I am looking to trigger the function when a user clicks (or uses the keyboard to select) an item from the datalist OR when a user entered a word and moves to the next input.

推荐答案

我遇到了类似的问题，这里是解决方案.基本上我想通过单独的输入或输入+keyup 事件触发更改事件，因此在 setTimeout 的帮助下引入了新变量来跟踪这一点.

I had a similar problem, here is the solution. Basically I want to trigger change event, either by sole input or input+keyup event, so new variable is introduced to track this, with small help of setTimeout.

HTML

<input list="search-list" value="" class="form-control search-list custom-select custom-select-sm" placeholder="...">
<datalist id="search-list">
  <!-- filled with javascript, eg: <option value="ISO-8859-1">ISO-8859-1</option> -->
</datalist>

JS

window.onlyInput = false; // true if selecting
window.timeoutID;
window.timeoutIDs = [];
$('.search-list')
.on('focus', function(){
    console.log('focus');
    onlyInput = false;
    $(this).val(""); // reset input
})
.on('change', function(){
    console.log('change');
    // YOUR CODE HERE, ex:
    // eg: var text = $(this).val().toLowerCase();
    // $.ajax ....
    onlyInput = false;
})
.on('keyup', function(){
    console.log('keyup');
    onlyInput = false;
    clearTimeoutIDs();
    $(this).trigger('change');
})
.on('input', function(){
    console.log('input');
    var $that = $(this);
    onlyInput = true;
    timeoutID = setTimeout(function(){
        if(onlyInput) {
            $that.trigger('change');
            $that.trigger('blur');
        }
        onlyInput = false;
    }, 300);
    timeoutIDs.push(timeoutID);
});

function clearTimeoutIDs() {
    $.each(timeoutIDs, function(i, d){
        clearTimeout(d);
    });
}

这篇关于从数据列表中选择项目时触发事件，而不是在键入时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！