更改输入自动完成值

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

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

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

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

Answer 2

我找到了

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（大数据慢）
send/receive 数据中的条件 ajax

希望能帮到你...

更改输入自动完成值

Change input autocomplete value

javascript

autocomplete

input