jquery, populate, auto complete

ITsolutionWizard
ITsolutionWizard used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
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" ?
Top Expert 2010
Commented:
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.

Author

Commented:
Thanks but I need sample with auto complete
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2010
Commented:
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 ;)
leakim971Multitechnician
Top Expert 2014

Commented:
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

Top Expert 2010

Commented:
@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.
leakim971Multitechnician
Top Expert 2014

Commented:
You should check my last question in my first answer and see how your solution gonna handle this simple case

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start Today