jquery, populate, auto complete

http://www.aspsnippets.com/Articles/AJAX-AutoCompleteExtender-Example-in-ASPNet.aspx

I used above codes to get auto complete.and let us assume the above has text box name called fullname
when a fullname is selected, I want to populate to below text boxes.
is it possible? If yes, how to do that?

<input type="text" id="firstName"><br>
<input type="text" id="lastName"><br>
LVL 1
ITsolutionWizardAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
zephyr_hex (Megan)Connect With a Mentor DeveloperCommented:
You can add the following attribute to the autocomplete extender:  OnClientItemSelected="splitName"

And then in jQuery, do:

function splitName(sender, args) {
          var fullname = $get("<%=TextBox1.ClientID %>").value);  //this is the textbox control that the autocomplete is associated with
          var pieces = fullnames.split(" ");
          console.log(pieces);  // for debug only
          $('#firstName').val(pieces[0]);
          $('#lastName').val(pieces[1]);
     }

Open in new window


The OnClientItemSelected attribute will call the splitName function when the user selects a value from the auto complete.

Here is a JS Fiddle mock up of the concept.  I can't demo the autocomplete extender, so I've created a button to trigger the event.  Also, please note that you should do some validation to make sure the full name is in the format you expect.  For example, cases like  "Bob Van Deer" or "Bob" need to be handled.  The code and demo I've given expect a first name and a last name separated by one space.  You need to figure out what to do in cases that don't meet that condition.
0
 
leakim971PluritechnicianCommented:
currently it just return a list of "ContactName" and not a list of "ContactName", "firstName" and "lastName"

so how do you want to know what is first and last name ? just a split ?
What is last and first name for the contactName "IT Solution Wizard" ?
0
 
ITsolutionWizardAuthor Commented:
Thanks but I need sample with auto complete
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
zephyr_hex (Megan)Connect With a Mentor DeveloperCommented:
I can't provide a demo with AJAX auto complete because there's no online demo site that supports ASP.NET.  Moreover, I've given you a demo that shows you how to do the jQuery part.  The only remaining piece, that I can't demo, is that you need to add the OnClientItemSelected attribute to the input that's the target of your auto complete.  You shouldn't need a demo for that part.  Just change your input by adding the attribute ;)
0
 
leakim971PluritechnicianCommented:
here samples :
https://www.experts-exchange.com/questions/28004117/jQuery-AutoComplete-from-Database.html
https://www.experts-exchange.com/questions/26388514/JQuery-Auto-Complete-and-ASP-net.html
https://www.experts-exchange.com/questions/28688532/jquery-autocomplete.html

What you need to read carefully is the response part of the ajax call :

                      return{
                        label: item.Name,
                        value: item.Name
                      }

Open in new window


				            response( $.map( data, function( item ) {
				                return {
				                    label: item.company,
				                    value: item.company,
				                    companyid: item.companyId
				                }

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
@leakim971 - How does that take the option the user selects and split it into two textboxes?  The AJAX response has already resolved by that point -- since it's the AJAX that populates the list of options.  The OP requires an event that fires when the user selects an option, not when autocomplete retrieves the options.

I've given the OP a solution that will work.  The event will fire a function on OnClientItemSelected and the function splits the selected option, and copies the two results to the textboxes.
0
 
leakim971PluritechnicianCommented:
You should check my last question in my first answer and see how your solution gonna handle this simple case
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.