Question

我正在使用数据列表，需要检测用户何时从下拉列表中选择内容。 A similar question has been asked但我需要它，以便仅当用户从datalist中选择某些内容时才会触发事件。如果他们在输入中键入内容，那么我不希望事件触发。（请注意我接受的问题的接受答案，即他们绑定输入，这不是我想要的）。我尝试过（没有成功）：

<datalist>
    <option>Option 1 Here</option> 
    <option>Option 2 Here</option>
</datalist>


$(document).on('change', 'datalist', function(){
   alert('hi');
});

编辑：这个问题与建议的问题不同，因为这是一个完全不同的问题。

Answer 1

您可以在更改时手动检查它。但是你需要检查datalist输入的变化。

$(document).on('change', 'input', function(){
    var options = $('datalist')[0].options;
    var val = $(this).val();
    for (var i=0;i<options.length;i++){
       if (options[i].value === val) {
          alert(val);
          break;
       }
    }
});

FIDDLE

Answer 2

请寻找适合您的解决方案。寻找演示

$(document).on('change', 'input', function(){
    var optionslist = $('datalist')[0].options;
    var value = $(this).val();
    for (var x=0;x<optionslist.length;x++){
       if (optionslist[x].value === value) {
          //Alert here value
          alert(value);
          break;
       }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="data">
<datalist id="data">
    <option value='1'>Option 1 Here</option> 
    <option value='2'>Option 2 Here</option>
</datalist>

et / c1z0bnsm / 7 /

Answer 3

优化解决方案

$("input").on('input', function () {
    var inputValue = this.value;
    if($('datalist').find('option').filter(function(){
        return this.value == inputVal;        
    }).length) {
        //your code as per need
        alert(this.value);
    }
});

Answer 4

在具有InputEvent的inputType属性的浏览器中，可以使用该属性过滤掉所有不需要的onInput事件。在Firefox 81上为“ insertReplacementText”，对于Chrome / Edge 86为null。如果需要支持IE11，则需要验证该值是否有效。

document.getElementById("browser")
  .addEventListener("input", function(event){
        if(event.inputType == "insertReplacementText" || event.inputType == null) {
          document.getElementById("output").textContent =  event.target.value;
          event.target.value = "";
    }
})

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<div id="output">
</div>

Answer 5

更多优化

public function userStart(Request $request, $progress)
    {
        \Log::info('User Starts here');

        switch ($progress) {

            case 1:
                $progress = 1;
                return $this->stepCellphone($request, $progress);

                break;

            case 2:

                return $this->stepOmang($request, $progress);

                break;

            case 3:

                return $this->stepFirstName($request, $progress);

                break;
        }

    } 

 public function stepCellphone(Request $request, $progress)
    {

        if ($progress = 1) {

            Log::info($progress); // 2
            \Log::info('At stepCellphone');


            $config = [
                'template' => '<ussd></ussd>',
                'rowName' => 'name',
            ];

            $text = $request->get('msg'); // get text from msg

            return response()->xml($data, 200, $config);

        }
        $progress = 2;
        return $this->userStart($request, $progress);

    }

    public function stepOmang(Request $request, $progress)
    {

        $progress = 2; 

        Log::info($progress); // LOG the progress of the user as the current tep
        \Log::info('At stepOmang');
        $config = [
            'template' => '<ussd></ussd>',
            'rowName' => 'name',
        ];
        $text = $request->get('msg'); // get text from msg

        if ($text != null) {
            return response()->xml($data, 200, $config);
        }
        $progress= 3
        return $this->userStart($request, $progress);
    }

}）;

Answer 6

这可能只是Chrome，在其他任何地方都未经测试！，但是我看到一个change事件在选择一个选项时触发。通常，change仅在文本字段失去焦点时才会在文本字段中发生。如果是正常的非数据列表更改，则change事件会在blur事件之前触发，因此我们必须同时检查两者：我们正在寻找不是立即< / strong>，后跟一个change：

blur

然后您可以像往常一样监听自定义var timer; el.addEventListener('change', function(e) { timer = setTimeout(function() { el.dispatchEvent(new CustomEvent('datalistchange')); }, 1); }); el.addEventListener('blur', function(e) { clearTimeout(timer); });事件。或者，您可以只输入特定的逻辑而不是datalistchange。

jsFiddle here

Answer 7

以上的解决方案都有一个大问题。如果数据列表有（例如）“bob”和“bobby”的选项，只要有人输入“bob”，他们的代码就会立即说这与单击“bob”是一样的......但是如果他们试图输入“鲍比”？

要获得更好的解决方案，我们需要更多信息。在输入字段上监听 'input' 事件时：

在基于 Chromium 的浏览器中，当您在输入字段中键入、删除、退格、剪切、粘贴等时，传递给处理程序的事件是 InputEvent，而当您选择一个选项时从数据列表中，事件只是一个 Event 类型，其属性为 type，等于“输入”。（在自动填充期间也是如此，至少对于 BitWarden）。

因此您可以侦听“输入”事件并检查它是否是 InputEvent 的实例以确定它是否来自自动填充（我认为应该允许，因为大多数时候自动填充不会填写这些类型的字段，如果填写，通常是一个合法的选择）/数据列表选择。

在 Firefox 中，情况有所不同。它仍然提供了一个 InputEvent，但它有一个值为“insertReplacementText”的 inputType 属性，我们也可以使用它。自动填充与 Chromium 浏览器的功能相同。

这里有一个更好的解决方案：

$('#yourInput').on('input', function(){
    if (
        !(e instanceof InputEvent) ||
        e.inputType === 'insertReplacementText')
    ) {
        // determine if the value is in the datalist. If so, someone selected a value in the list!
    }
});

我希望浏览器具有相同的实现，该实现具有数据列表选择独有的事件类型/属性，但它们没有，所以这是我所拥有的最好的。我还没有在 Safari 上测试过这个（我现在没有访问权限或时间），所以你应该看看它，看看它是否相同或有其他区别。

如何获取datalist的更改事件？

7 个答案: