如何使选项始终显示，无论输入值是什么

How to make an option always display no matter what the input value is?

本文关键字：输入 是什么 显示 何使 选项      更新时间：2023-09-26

我想要一个动态<datalist>作为输入。

所以我写了这个：

<input type="text" id="newLocationName" list="addressSuggestions" onkeyup="suggestAddress()" autocomplete="off">
<datalist id="addressSuggestions"></datalist>

suggestAddress()将根据从Google Geocoding API获得的结果，在数据列表中添加一些选项。

"<option value='" + results[i].formatted_address + "'>"

但是，问题是，有时地址不包含输入字符串，因此该选项不会显示，因为值与用户的输入不匹配。

例如，当我输入gee时，地理编码API将返回地址Gée, 50300 Saint-Jean-de-la-Haize, France。Gée与gee不匹配。所以它不会显示。

因此，我想知道是否有一种方法可以使选项始终显示，无论用户键入什么。

提前谢谢。

编辑：

我使用jQuery自动完成解决了这个问题

只需使用$( ".selector" ).autocomplete( "search", "" ); 按空字符串搜索选项即可

不，datalist行为是由浏览器定义的，（目前）似乎没有办法做你想做的事。

两种选择是：

  1. 将结果标准化（例如，将"Gée"预处理为"Gee"在将其添加为option之前）。你可能想保留一个将原始文本映射到稍后使用的某个位置。

  2. 使用一个更强大的组件，如typehead.js，它允许您定义一个自定义的matcher，并为此定义Gée==Gee。

    var matcher = function(results) {
  return function findMatches(query, callback) {
    var matches = [];
    var regex = new RegExp(query, 'i');
    results.forEach(function(result) {
      if(regex.test(result.replace('é', 'e'))) { //etc
        matches.push(result);
      }
    });
    callback(matches);
  };
};
var results = ...;
$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'addresses',
  source: matcher(results)
});
相关文章：