自动填充不起作用

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

var arrAntibiotics = {};

$.ajax({
    url: 'data.xml',
    dataType: 'xml', 
    success: function (data) {
        $(data).find('antibiotic').each(function () {
            var name = $(this).find('name').text();  //name of product

            $('.ac').append('<li>' + name + '</li>');
            // console.log(name + 'ffff');

            $( "#input" ).autocomplete({
                source: name
            });

<div id="delvo">
    <div class="c">
        <form>
            <input type="text" name="input"   id="input" />
            <a class="arrow" href="#"><span class="arrow-down"></span></a>
            <ul class="ac"></ul>
      </form>
  <div class="results">

当我尝试使用列表中的前3个字母进行搜索时，列表不会在自动填充中遇到问题。

Answer 1

它无法正常工作的原因是因为javascript和输入框之间没有链接。您需要添加<input type="text" name="input" id="input" onkeypress="doSearch()" />之类的内容，然后将ajax调用包装在名为doSearch的函数中。

或者，只需使用jQuery UI自动完成插件，该插件已经内置了您需要的所有功能，并且已经过数百万用户的测试。

jQuery UI Autocomplete