?
Solved

Jquery Autocomplete submit id

Posted on 2010-11-17
6
Medium Priority
?
796 Views
Last Modified: 2012-05-10
I'm using Jquery autocomplete to search users. I need to display a users first and last name, but submit the userid only with the form.

Here's what I have now.

//format of data returned from ajaxsearch.asp. | as seperator

lastname, firstname, userid|lastname2, firstname2, userid

//the javascript

<script type="text/javascript">
$().ready(function() {

      function log(event, data, formatted) {
                  $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
            }
            
            function formatItem(row) {
                  return row[0] + " (<strong>id: " + row[1] + "</strong>)";
            }
            function formatResult(row) {
                  return row[0].replace(/(<.+?>)/gi, '');
            }
            
            $("#editid").autocomplete("ajaxsearch.asp", {
                  selectFirst: true

            });

      })
</script>


//the form field

<input type="text" name="editid" id="editid" />
0
Comment
Question by:griffaw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:jmatix
ID: 34159708
Your <script> should be as below:
<script type="text/javascript">
$(document).ready(function() {

function log(event, data, formatted) {
          $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
    }
    
    $("#editid").autocomplete("ajaxsearch.asp", {
          selectFirst: true,
	 formatItem: function(row) {
		var dat = (""+row).split(/[\,\s]/);
		return dat[0] + " " + dat[1] + " (<strong>id: " + dat[2] + "</strong>)";
		  },

	formatResult: function(row){
		var dat = (""+row).split(/[\,\s]/);
		return dat[2];
		}
    });
	
});

</script>

Open in new window

0
 

Author Comment

by:griffaw
ID: 34160045
jmatix:

That works to pass the id only, but I need the selected user's name to appear in the text box and the id to be submitted by the form...possibly in a hidden field?

Another option would be to use your configuration and submit instantly on select...
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34160191
If this is the only input that you expect from the user, you can submit the form immediately after the user select a name. Otherwise, as you said, you need to populate the id into a hidden field, say, with id userid.
So the result handler has to be modified as:

$(#userid).val(dat[2]);
return (dat[0]+' '+dat[1]);

0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:griffaw
ID: 34160298
jmatix:

Please post the entire script with your modification...I'm getting illegal character errors.

Thanks
0
 
LVL 16

Accepted Solution

by:
jmatix earned 2000 total points
ID: 34160616
I posted from my mobile. Missed quotes around #userid. See below. Also add:

<input type="hidden" name="userid" id="userid" />
<script type="text/javascript">
$(document).ready(function() {

function log(event, data, formatted) {
          $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
    }
    
    $("#editid").autocomplete("ajaxsearch.asp", {
          selectFirst: true,
	 formatItem: function(row) {
		var dat = (""+row).split(/[\,\s]/);
		return dat[0] + " " + dat[1] + " (<strong>id: " + dat[2] + "</strong>)";
		  },

	formatResult: function(row){
		var dat = (""+row).split(/[\,\s]/);
                  $('#userid').val(dat[2]);
                  return (dat[0]+' '+dat[1]);
		}
    });
	
});

</script>

Open in new window

0
 

Author Comment

by:griffaw
ID: 34165494
jmatix:

Perfect!

How would I set the form to submit when a selection is made? I'm not sure how to do this on a text field.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

777 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