2017-09-27 117 views
0
<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 
      }); 

enter image description here自动填充不工作

<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个字母进行搜索。

回答

0

它不工作的原因是因为javascript和输入框之间没有链接。您需要添加诸如<input type="text" name="input" id="input" onkeypress="doSearch()" />之类的东西,然后将您的ajax调用包含在名为doSearch的函数中。

另外,只需使用jQuery UI自动完成插件,它已经获得了您需要的所有功能,并且已经被数百万用户测试过。

jQuery UI Autocomplete

+0

感谢,但如果u通过我的代码,那么在哪里明白,在我的代码的变种名称是我正在通过XML,并且由于保持这样我能存储逐个渲染动态li元素...总的来说,它是一个动态的li元素,因为你所共享的url已经被手动存储了。 – ASHU

+0

在下面做提包 $(“#input”).autocomplete({ source:name } ); – ASHU

+0

也有XML例子 – twoleggedhorse