从包含特定字符串的datalist中按值选择选项

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

您的选项值存在问题。 如果您在值中键入另一个术语，例如value1，value2，example，user等，则一切正常。 我认为你的选择有一个特殊的性质，这就是为什么它不起作用。

请在此处查看示例代码

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

Answer 2

好吧，一个非常的noob错误我忘了把list属性放在我的input字段中，这就是为什么它不起作用。 它应该是那样的

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