Question

编辑html输入字段时，我想触发一个方法。此方法显示具有该输入字段选项的数据列表。我该怎么做呢？感谢

Answer 1

<input type="text" onChange="mymethod()" />

<script type="text/javascript">
function mymethod() {
    //datalist code goes here//
}
</script>

Answer 2

好的浏览器支持开箱即用的<datalist>代码：

  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

请参阅：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

支持的浏览器： http://caniuse.com/#feat=datalist

有一些替代方案可以提供更广泛的浏览器支持和更流畅的界面。

以下是如何使用Select2（http://ivaynberg.github.io/select2/）：

HTML：

<select id="select2Example" multiple>
<option>Option 1</option>
<option>Option 2</option>
</select>

JS：

$(function(){
  $('#select2Example').select2();
});

关于Plunker： http://plnkr.co/edit/AwO4sHPZsP2BqgItkwil?p=preview

Typeahead JS也很好：

https://twitter.github.io/typeahead.js/

如果您决定自行实施，可以使用@BrBl1ghtSide选项添加事件处理程序：

HTML：

<input onchange="handleChange"></input>

JS：

var handleChange=function(){
/*code to display options */
};

但这有以下缺点：

它需要changeHandler位于全局范围内，这会引发冲突的可能性。
您无法使用多个功能来处理更改事件。
您必须在两个位置（HTML和JS）维护函数的名称。

最好使用addEventListener（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener - 您可以安全地忽略冒泡/捕捉内容）。但请注意，旧版本的IE使用attachEvent代替。这是一个例子：

HTML：

JS：

var inputBox=document.getElementById('exampleInput');
var handleChange=function(){
/*code to display options */
};
inputBox.addEventListener("change", handleChange);

另一种选择是使用库。许多人使用与jQuery相同的语法：http://api.jquery.com/on/。例如，Gator是一个很好的小型库，用于添加事件监听器：http://craig.is/riding/gators。使用jQuery或Gator，您可以执行以下操作：

HTML：

<input id="exampleInput"></input>

JS with jQuery：

$（＆＃39; #exampleInput）。在（＆＃39;变更＆＃39;，handleChange）;

JS与Gator：

var inputBox=document.getElementById('exampleInput');
Gator(inputBox).on('change',handleChange);

请注意，去除您用于处理更改的功能以获得更好的用户体验和性能是一个非常好的主意。请参阅此说明：http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

Answer 3

你确实可以用纯JS解决这个问题，但我更喜欢jQuery来完成这些任务。您可能需要查看此内容：Autocomplete | jQuery UI

编辑输入栏时的火焰方法

3 个答案: