Solved

jquery, populate, auto complete

Posted on 2016-09-09
8
46 Views
Last Modified: 2016-10-03
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
Comment
Question by:ITsolutionWizard
  • 3
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41792056
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
 
LVL 42

Accepted Solution

by:
zephyr_hex (Megan) earned 500 total points (awarded by participants)
ID: 41792065
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
 

Author Comment

by:ITsolutionWizard
ID: 41792215
Thanks but I need sample with auto complete
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 42

Assisted Solution

by:zephyr_hex (Megan)
zephyr_hex (Megan) earned 500 total points (awarded by participants)
ID: 41794368
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
 
LVL 82

Expert Comment

by:leakim971
ID: 41817756
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
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41818101
@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
 
LVL 82

Expert Comment

by:leakim971
ID: 41818143
You should check my last question in my first answer and see how your solution gonna handle this simple case
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now