-1

我正在尝试使用类别选项创建一个自动完成功能，但是当我使用 catcomplete 尝试它时，我遇到了错误；

  1. TypeError: $.widget is not a function "localhost/php25/js/jquery.ui.widget.js" 第 67 行

  2. TypeError: base is not a constructor "localhost/php25/js/jquery.ui.widget.js" 第 67 行

  3. TypeError: $("#search").catcomplete is not a function "localhost/php25/index.php" 第 50 行

这是我的代码：

<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>

    <style type="text/css">
        .ui-autocomplete{
            padding: .2em .4em;
            margin: .8em 0 .2em;
            line-height: 1.5;
        }
    </style>

    <script type="text/javascript">
        $.widget( "custom.catcomplete", $.ui.autocomplete, {
            _renderMenu: function( ul, items) {
                var self = this, 
                currentCategory = "";
                $.each( items, function(index, item){
                    if( item.category != currentCategory){
                        ul.append( "<li class='ui-category'>" + item.category + "</li>");
                        currentCategory = item.category;
                    }
                    self._renderItem( ui, item);
                });
            }
        });
    </script>

    <script type="text/javascript">
        $( function(){
            var data =  [
                {label:"London Biggin Hill Arpt,BQH,United Kingdom",category:"airport"},
                {label:"Longvic Airport,DIJ,France",category:"airport"},
                {label:"Long Island Arpt,HAP,Australia",category:"airport"},
                {label:"Long Island Macarthur Arpt,ISP,United States",category:"airport"},
                {label:"Long Banga Airfield Arpt,LBP,Malaysia",category:"airport"},
                {label:"Longview,United States",category:"city"},
                {label:"Long Island,Australia",category:"city"},
                {label:"Long Banga,Malaysia",category:"city"},
                {label:"Long Bawan,Indonesia",category:"city"},
                {label:"Londrina,Brazil",category:"city"}
            ]; 
            $('#search').catcomplete({
                source: data 
            });
        });
    </script>
</head>

<body>
    <label for="search">Search: </label>
    <input id="search" type="text" />
</body>
</html>

我刚刚编写了类似于http://jqueryui.com/autocomplete/#categories中所示的代码

谁能帮帮我。

4

1 回答 1

0

您的 JavaScript 包含顺序错误。将 autocomplete.js 移动到脚本标签的末尾。

于 2012-10-17T12:14:59.093 回答