jQuery autocomplete explanation

Question

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 20-Sep-11 0:20am

sajithnet

Updated 20-Sep-11 0:22am

André Kraak

v2

Add a Solution

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

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Anup Das Gupta (asteranup) · Answer 1 · 2011-09-20T01:10:00

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.

Manfred Rudolf Bihy · Answer 2 · 2011-09-20T01:25:00

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

jQuery autocomplete explanation

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0