Jquery Autocomplete submit id

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" />
griffawAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Justin MathewsConnect With a Mentor Commented:
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
 
Justin MathewsCommented:
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
 
griffawAuthor Commented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Justin MathewsCommented:
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
 
griffawAuthor Commented:
jmatix:

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

Thanks
0
 
griffawAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.