Jquery Autocomplete

Jquery Autocomplete

Posted by Sayan Guharoy

Jquery Drop Down

//Add Drop down Items

//Add Drop down Items
var projects = [
    {
    value: "Content (A)"},
{
    value: "Content (B)"},
{
    value: "Content (C)"}
          ];

//check whether the class exists
if ($(".combotxt").length) {

    $(".combotxt").autocomplete({

        minLength: 0,
        source: projects,

        //Update the text field with value that user focus from the drop down item  
        focus: function(event, ui) {
            $(this).val(ui.item.label);
            return false;
        },

        //If user enters value outside the items we will remove the entry from the text field            
        change: function(event, ui) {
            if (!ui.item) {
                this.value = '';
            }
        }
    })

    //we will show all items as soon as user focus on the text field
    .focus(function() {

        $(this).data("autocomplete").search($(this).val());
    })

    //Filters records as user starts to type ahead
    .data("autocomplete")._renderItem =

    function(ul, item) {
        return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
    };


}​

To change width of the drop down list the following tweak will work

.ui-autocomplete { width: 200px !important;}