Select 包含特定字符串的数据列表中的值选项

Question

这是我的js代码

$('#AddressStreet').on('keyup', function() {
    let value = $(this).val();
    let optionVal = $('#AddressStreetList option[value*="' + value + '"]').attr('rel');
    console.log(optionVal); //output 'undefined'
    if (!optionVal) {
        // do something
    }
});

这是我的 html 代码：

<input type="text" class="form-control" name="street" placeholder="street" id="AddressStreet">

我正在使用 ajax 创建一个简单的数据列表，当我输入 Сам 时，数据列表看起来像这样

<datalist id="AddressStreetList">
  <option rel="2346" value="ул. Самара"></option>
  <option rel="2444" value="ул. Цар Самуил"></option>
</datalist>

当我尝试将它输出到控制台时，我从 console.log 得到 undefined。此外，当我通过 Chrome 使用 DevTools 并编写此

$('#AddressStreetList option[value*="Сам"]').attr('rel');

我成功获得了想要的输出：

"2346"

但我不明白为什么我的代码不想工作？

Answer 1

你的选项值有问题。如果您在 value 中键入另一个术语，例如 value1、value2、example、user 等，都可以正常工作。我认为您的选项具有特殊性，这就是它不起作用的原因。

请在此处检查示例代码

[https://codepen.io/aalokmali/pen/yWWWdm]

Answer 2

嗯，这是一个非常菜鸟的错误，我忘记将 list 属性放入我的 input 字段中，这就是它不起作用的原因。应该是这样

<input type="text" class="form-control" list="AddressStreetList" name="street" placeholder="street" id="AddressStreet">

Select 包含特定字符串的数据列表中的值选项

Select option by value from datalist containing a certain string

javascript

jquery

utf-8

html-datalist