来自 div 值的 Javascript 自动完成源动态不起作用

Question

我正在 php 文件上编写一个 javascript 函数来执行自动完成。我必须从 div 值获取输入，就像

value1
value2
... 

输入的 div 值是动态的，并且会随着某些文本的点击事件而变化。因此，每次用户单击这些值时，我都会调用一个名为 test() 的函数，该函数会重置自动完成功能。

我正在编写以下代码来获取值，并在编辑后作为源发送到自动完成功能。

Select Value: <input id="autocomplete">

<script type="text/javascript">

        function test()
 {

             var div_values = document.getElementById("id_div_values").innerHTML;
             var div_val_arr = div_values.split("</li>");
             var search_val ="[";


                  for (var j = 0; j < div_val_arr.length-1; j++)
                  {                                                      
                     search_val = search_val+"\""+div_val_arr[j].replace("<li>","")+"\"";

                   }
              search_val = search_val+"]";

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

         }
      </script>

但它不起作用。我已经检查了 div 值，它正常出现并以数组形式形成，但它不起作用。如果我将源代码设置为

source: ["value1","value2","value3","value4"];

然后它就可以正常工作了。我没有明白我做错的地方。预先感谢您提出的宝贵建议。

Answer 1

javascript

$(document).ready(function() {
var div_val_arr = [];
$("#id_div_values li").each(function() {
    div_val_arr.push($(this).text());
});
$('#autocomplete').on('focus click touchstart',function() {
$( "#autocomplete" ).autocomplete({
source: div_val_arr
});
});
});

html

    <div id="id_div_values">
        <ul>
    <li>some value</li>
    <li>another value</li>
    <li>value3</li>
    <li>value4</li>
    <li>value5</li></ul>
    </div>

<input type="text" title="search" id="autocomplete">

fiddle http://jsfiddle.net/arfrbzbz/1/