更改输入自动完成值

Question

我还有另一个问题：是否可以使用javascript动态更改输入自动完成值？

例：

<input id="myInput" 
       placeholder="Write something here..." 
       onchange="changeAutocompleteValue(event)">

<script>
    function changeAutocompleteValue(event)
    {
        var list = ["first", "second", "third"];
        event.list = list;
    }
</script>

Google示例： 谷歌搜索

我能用普通的JS做到吗？ 任何建议将是巨大的:)。

Answer 1

我发现

javascript：自动完成javascript文本字段

如果使用现有库

typeahead.js

typeahead.js /示例

 function loadXMLDoc(_target, _type,_func) { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 ) { if(xmlhttp.status == 200){ data = JSON.parse(xmlhttp.responseText); _func(data); } else if(xmlhttp.status == 400) { alert('There was an error 400') } else { alert('something else other than 200 was returned') } } } xmlhttp.open(_type, _target, true); xmlhttp.send(); } function ontxtChange(){ var dcc = document.getElementById('autocc'); var dc = document.getElementById('autoc'); dcc.innerHTML = ' '; var i = 0; var target = "https://api.github.com/users/mralexgray/repos" // if(dc.value.length > 0){ loadXMLDoc(target,'GET',function(data){ data.forEach(function(x){ if(i < 10){ if(x.name.toLowerCase().indexOf(dc.value.trim()) != -1){ dcc.innerHTML += '<p class="accItem">' + x.name.toLowerCase() + '</p>'; i++; } } }); }); } }

 .accItem{ background-color:#333; color:#fff; width:200px; } #autocc{ width:200px; }

 <body> <input type="text" id="autoc" onkeypress="ontxtChange()" > example : "am" <div id="autocc"> </div> </body>

建议 -

调用ajax中的条件（大数据速度慢）
ajax发送/接收数据中的条件

希望这样可以帮助您...

Answer 2

有可能，但是您将需要编写更多代码。 使用现有库为您处理此问题的最佳选择：

文档： https : //github.com/devbridge/jQuery-Autocomplete

演示： http : //devbridge.github.io/jQuery-Autocomplete/

更改输入自动完成值

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-02-16 04:37:10

解决方案2
0 2015-02-16 03:14:06

更改输入自动完成值

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-02-16 04:37:10

解决方案2 0 2015-02-16 03:14:06

解决方案1
1 已采纳 2015-02-16 04:37:10

解决方案2
0 2015-02-16 03:14:06