从包含特定字符串的数据列表中按值选择选项答案

【问题标题】：Select option by value from datalist containing a certain string从包含特定字符串的数据列表中按值选择选项
【发布时间】：2019-10-22 00:59:16
【问题描述】：

这是我的 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”

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

【问题讨论】：

标签： javascript jquery utf-8 html-datalist

【解决方案1】：

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

请在此处查看示例代码

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

【讨论】：

我不认为这是问题所在，就好像工作从输入框中输入的内容开始，它会以正确的方式找到它，但如果输入框中输入的内容在某处在字符串中间然后由于某种原因它不起作用
如果您只是从数据列表选项值中复制 Самара 或 Сам 并将其粘贴到输入框中，它将起作用。然后它会给你正确的结果。

【解决方案2】：

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

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

【讨论】：