Question

我正在使用AJAX从服务器提取潜在的匹配结果，并在每次键入事件时将选项附加到搜索栏上的数据列表中。问题是，如果用户添加尾随空格，则数据列表将折叠并且不显示匹配结果。如果有匹配的结果以及其他尾随空格，如何强制数据列表保持打开状态？

我描述的行为在此JS fiddle中进行了说明（不是我的，是从this thread中提取的）

我的JS：

<tr>
  <th><label for="id_bha_number">Bha number:</label></th>
  <td><input type="number" name="bha_number" value="1" required id="id_bha_number" /></td>
</tr>

HTML：

$(document).ready(function() {
  $(window).on('load', function(){
    var search_input = $("#listing-search-bar")

    if (search_input) {
     search_input.keyup(function(el){
      autocomplete(el);
     });
    };

    function autocomplete(el) {
      var input = el.target;
      var min_chars = 0;
      if (input.value.length > min_chars) {
        $.ajax({
          type: 'GET',
          url: "/listings/search",
          data: {"query" : input.value},
          dataType: "json"
        }).done(function(response) {
          // Add catch for if request failed
          response.forEach( function(city) {
            console.log(city)
            if (!$(`#cities option[value="${city}"]`).length) {
              $("#cities").append(`<option value="${city}"></option>`);
            };
          });
        });
      };
    };
  });
});

Answer 1

数据列表选项具有一些属性，如value，如果您设置value，它将打开带空格的下拉列表。例如，您可以检查以下代码

let originalInput = $("#input").val();
$("#datalist").append(`<option value=${originalInput}>${originalInput}</option>`);
$("#datalist-input").change(function(){
if(datalistText !== originalInput){
    alert(`The original value: "${originalInput}" is not equal to: "${datalistText}"`);
}else{
  alert(`The original value: "${originalInput}" is equal to: "${datalistText}"`);
}}); // end change

与数据列表选项进行比较时，如何忽略文本输入中的尾部空白？

1 个答案: