Solved

Jquery Autocomplete submit id

Posted on 2010-11-17
6
779 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
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:jmatix
Comment Utility
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
Comment Utility
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
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:griffaw
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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…
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…

762 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

12 Experts available now in Live!

Get 1:1 Help Now