Home/ Questions/Q 8685475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:34:53+00:00

I am trying to create an autocomplete with category option, but when i am

  • 0

I am trying to create an autocomplete with category option, but when i am trying it by using catcomplete i am getting errors;

  1. TypeError: $.widget is not a function
    “localhost/php25/js/jquery.ui.widget.js”
    Line 67

  2. TypeError: base is not a constructor
    “localhost/php25/js/jquery.ui.widget.js”
    Line 67

  3. TypeError: $(“#search”).catcomplete is not a function
    “localhost/php25/index.php”
    Line 50

Here is my code:

<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>

I just wrote my code similar to that shown in http://jqueryui.com/autocomplete/#categories

can anyone help me out plz.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your JavaScript include order is wrong. Move autocomplete.js to the end of the script tags.

    • 0