Click here to Skip to main content
14,979,837 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I am new to jQuery, can any one help me understand the below code to do auto complete?

$("#autocomplete").autocomplete({
                select: function(event, ui) {
                    $(this).val(ui.item.label);
                    __doPostBack($("input[id*=btn]").attr("id"), "OnClick")
                },
                source: function(request, response) {
                    response($.map(dataArray, function(item) {
                        if (item.label.indexOf($("#autocomplete").val()) == 0) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }
                    }))
                },
                minLength: 1
            });



Regards,
sajith
Posted
Updated 20-Sep-11 0:22am
v2
Comments
AditSheth 20-Sep-11 7:20am
   
Hi,
Can you post link from where you find this.
Thanks
sajithnet 20-Sep-11 7:38am
   
http://forums.asp.net/p/1663801/4348152.aspx

Hi,

select:
This is an event which gets called when one select an item from the drop list.
JavaScript
$(this).val(ui.item.label);

is assigning the value of the selected label the textbox.

The line
JavaScript
__doPostBack($("input[id*=btn]").attr("id"), "OnClick") 
is used to fire some server side event of the button with id btn.

source:
This is the event to associate data source to the auto complete. In this case dataArray should be something like-
JavaScript
<script type="text/javascript"> 
//<![CDATA[
 var dataArray=[{"value":"1","label":"abc"},{"value":"1","label":"abc"},{"value":"2","label":"acbc"},{"value":"3","label":"abcfd"},{"value":"4","label":"assbc"},{"value":"5","label":"aaabc"},{"value":"6","label":"ddabc"},{"value":"7","label":"dggabc"},{"value":"8","label":"dabc"},{"value":"9","label":"vvabc"},{"value":"10","label":"vabc"},{"value":"11","label":"vgafftbc"},{"value":"12","label":"vabc"},{"value":"13","label":"vddabc"}]//]]>
</script>

Each time there is any change in the text box, it call the corresponding function. This function takes response as a second parameter which is nothing but a function which accept array of label value. And in this case jQuery map[^] is used to filter the matching value.

For reference check this[^] post.
   
Comments
AditSheth 20-Sep-11 7:15am
   
If id of button is btn then why they find ID attribute ?
i thing btn is not id. and what is mean by '*' in [id*=btn]
Thanks
sajithnet 20-Sep-11 7:35am
   
AnupDasGupta ur comment is really useful thanks a lot dear.hope i will get help further
To understand what the expression $("input[id*=btn]") means you'll have to learn about jQuery selectors. Selectors are expressions that let you identify one or many DOM elements. jQuery has a whole bunch of selectors for your convenience and here is the link where you can learn all about them: http://api.jquery.com/category/selectors/[^].

Best Regards,

—MRB
   
Comments
sajithnet 20-Sep-11 8:30am
   
thanks MRB

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900