时间戳

首页 > 解决方案 > 与数据列表选项进行比较时，如何忽略文本输入中的尾随空格？

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

问题描述

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

我描述的行为在这个JS fiddle中进行了说明（不是我的，来自这个线程）

我的 JS：

$(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>`);
            };
          });
        });
      };
    };
  });
});

HTML：

 <%= form_with url: search_listings_path, method: :get, local: true, id: "listing-search-bar" do |f| %>
    <%= f.text_field :query, placeholder: "Search a city...", list: "cities" %>
      <datalist id="cities"></datalist>
  <% end %>

标签： javascripthtmlautocompletehtml-datalist

解决方案

datalist 选项有一些属性，如 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

推荐阅读