来自 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">

小提琴http://jsfiddle.net/arfrbzbz/1/

Answer 2

首先，

您缺少在以下代码中附加"，"（逗号）

search_val = search_val+"""+div_val_arr[j].replace("<li>","")+""";

上面的代码将制作如下数组：

search_val =["value1""value2""value3""value4"];

添加逗号并确保它将生成数组，如下所示。

search_val =["value1","value2","value3","value4"];

Answer 3

您可以通过直接将div_val_arr指定为自动完成的来源来检查

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