Jquery自动完成和全局数组

时间:2012-09-05 02:52:35

标签: jquery jquery-ui jquery-autocomplete jquery-widgets

您好我正在尝试使用Jquery UI Autocomple,但我遇到了一些问题。我正在使用一个由函数填充的全局数组。但Autocomplete不会使用它。这是我想要如何使用这个小部件的一个小例子。

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="plugins/jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css"/>
        <script type="text/javascript" src="plugins/jquery-ui-1.8.23.custom/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="plugins/jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min.js"></script>
        <script type="text/javascript">
            var data = [];
            $(document).ready(function(){
                //var data1 = ["Luis","DJ","Jon","Les","Jimmy"];
                $("#autocomp").autocomplete({
                    source: data
                });
            });
            function Load(){
                data =  ["luis","dj","jon","les","jimmy"];
            }
            function Alert(){
                alert(data);
            }
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body onload="Load()">
        <div>
            Type:<input type="text" id="autocomp"/>
            <button onclick="Alert()">test</button>
        </div>
    </body>
</html>

感谢您的回复

2 个答案:

答案 0 :(得分:2)

如果在初始化后修改了源代码,则需要重新设置源代码,因此Load函数会变为:

 function Load(){
            data =  ["luis","dj","jon","les","jimmy"];
           $('#autocomp').autocomplete("option","source",data);
 }

jsfiddle with a demo

答案 1 :(得分:2)

<body onload="Load()"> 使用jquery的.ready()或Load()。做这两件事只会让你迷惑,因为他们确实在不同的时间发生。 .ready documentation提到使用两者并不是一个好主意,前两段进一步解释了它们确实在不同时间发生。

autocomplete documentation提到如果您更改数据列表,则需要重置数据列表。

如上所述,决定是否要onload或.ready()并在那里设置数据列表变量:)

$(document).ready(function(){
  if(!data){
data = ["Luis","DJ","Jon","Les","Jimmy"];
}
 $("#autocomp").autocomplete({
   source: data
   });
});