更改输入自动完成值答案

【问题标题】：Change input autocomplete value更改输入自动完成值
【发布时间】：2015-02-17 02:41:07
【问题描述】：

我还有一个问题：有什么方法可以使用 javascript 动态更改输入自动完成值？

例子：

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

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

谷歌示例：

我可以用普通的 JS 来做吗？任何建议都会很棒:)。

【问题讨论】：

不值得回答，但我有这个简单的 JS 库，您或将来访问此页面的任何人可能会对它感兴趣：github.com/danqing/autocomplete :)
@Danqing 好主意！无论如何，那时我太愚蠢了：D 老实说，我会在一小时或更短的时间内创建一个库来解决这个问题：D

标签： javascript input autocomplete

【解决方案1】：

我找到了

javascript : Auto complete javascript text field

如果使用现有库则

typeahead.js

typeahead.js / example

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 发送/接收数据的条件

希望以这种方式帮助您...

【讨论】：

我不知道，@wit_peter，因为你的第一个例子对我不起作用（我有 mozilla）。我可以编程divs and spans，就像打字机一样，这对我来说并不难，但我想知道方法，如何更改这个自动完成值：/
你真的很想帮助我，+1 :)

【解决方案2】：

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

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

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

【讨论】：

抱歉，我只需要普通的 JS，而不是 jQuery...我知道用 jQuery 很容易做到，但我不能用 jQuery...
我实际上正在开发不依赖 jQuery 的版本。很快就会发布。如果有兴趣，请告诉我。
我已经用 div“解决”了这个问题，因为我不想浪费时间，而且，我发现 google 也使用 div...但是，我认为世界上有很多人有这个问题，他们用divs 和spans 解决了这些问题。当您想制作没有 JQuery 的版本时，如果可能的话，您还可以查看输入自动完成列表样式:) 干杯 :)