Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 79
  • Last Modified:

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>
0
ITsolutionWizard
Asked:
ITsolutionWizard
  • 3
  • 3
2 Solutions
 
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
 
zephyr_hex (Megan)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
 
ITsolutionWizardAuthor Commented:
Thanks but I need sample with auto complete
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
zephyr_hex (Megan)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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now