Solved

Jquery Autocomplete submit id

Posted on 2010-11-17
6
787 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 500 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

730 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