Solved

jquery, populate, auto complete

Posted on 2016-09-09
8
52 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 43

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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 43

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 43

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Background video not displaying in Internet Explorer. 3 37
Hide Table in merge 3 31
How to format numbers and letters in nested lists 5 32
Media Queries  not Firing 6 17
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

856 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