CODEWITHSUNDEEP
autocompleteajaxcontroltoolkit
user2626980
user2626980

Reputation: 3

How to implement AutoCompleteExtender OnclientPopulated behaviour?

I am trying to implement an autocomplete list using the Ajax toolkit: AutoCompleteExtender

How to achieve the following behaviours using Ajax toolkit: AutoCompleteExtender? Can provide any code examples also?

Can anyone advise?

Upvotes: 0

Views: 811

Answers (2)

YaakovHatam
YaakovHatam

Reputation: 2344

Your first point is the ajax ACE (Auto Complete Extender) default behavior.

the second one, you can use jquery .mouseleave() and .mouseenter() event to shave your contextKey in a hidden field on mouse leave and fill it again in mouse enter.

Upvotes: 0

Kapil Khandelwal
Kapil Khandelwal

Reputation: 16144

I personally prefer using jQuery UI Autocomplete.

Demo & Code:

jQuery UI Autocomplete

Sample JS Code:

$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });
});

Upvotes: 1

Related Questions