Solved

Jquery Autocomplete - using the value instead of the label

Posted on 2013-01-04
11
437 Views
Last Modified: 2013-01-12
The default action of autocomplete will grab the value  and place into the input box. I need to use the value as we do a reverse lookup to check the correct value is being parsed. However to the user I want to display the label (text) here is my  jquery code:


<script type="text/javascript">
           $(document).ready(function () {
                   $("#<%=txtQtOccupation.ClientID%>").autocomplete({
                       source: function (request, response) {
                           $.ajax({
                               url: '<%=ResolveUrl("~/Service.asmx/GetOccupationDescription") %>',
                               data: "{ 'prefix': '" + request.term + "'}",
                               dataType: "json",
                               type: "POST",
                               contentType: "application/json; charset=utf-8",
                               success: function (data) {
                                   response($.map(data.d, function (item) {
                                       return {
                                           label: item.split('-')[1],
                                           value: item.split('-')[0]

                                       }
                                   }))
                               },
                               error: function (response) {
                                   alert(response.responseText);
                               },
                               failure: function (response) {
                                   alert(response.responseText);
                               }
                           });
                       },

                       select: function (event, ui) {
                           // Stop the Search input reloading the page

                        event.preventDefault();

                       },
                       minLength: 3
                   });
               });
            </script>


 <asp:TextBox id="txtQtOccupation" value="" runat="server" SkinID="Large" MaxLength="20"></asp:TextBox>

I have a webservice which retrieves the data from the database called:
/Service.asmx/GetOccupationDescription

This all works correct, but the label data is picked up instead of the value when stepping through the code. I have tried using a hidden field but can't get this to work either.

I am using visual studio 2010 (4.5 framework)
0
Comment
Question by:TCBob
  • 7
  • 4
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38744352
update your select part :

 select: function (event, ui) {
                           // Stop the Search input reloading the page 
			$("#<%= txtQtOccupation.ClientID %>").val(ui.item.value);
			return false;

                       },

Open in new window

0
 

Author Comment

by:TCBob
ID: 38744414
Thanks for the swift reply, having implemented your suggestion I  still get the value displaying in the textbox when I require the label to display to the user and the value in the code
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38744419
I  still get the value displaying in the textbox
your question title say : using the value instead of the label

what about :
 select: function (event, ui) {
                           // Stop the Search input reloading the page
                  $("#<%= txtQtOccupation.ClientID %>").val(ui.item.label);
                  return false;

                       },
0
 

Author Comment

by:TCBob
ID: 38744464
Again thanks for the quick response, using this code:

 select: function (event, ui) {
                           // Stop the Search input reloading the page
                  $("#<%= txtQtOccupation.ClientID %>").val(ui.item.label);
                  return false;

works on the page functionality wise, but I now submit the label  when I should submit the
value. Any further idea's ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38744479
select: function (event, ui) {
                           // Stop the Search input reloading the page
                  $("#<%= hdnQtOccupation.ClientID %>").val(ui.item.value);
                  $("#<%= txtQtOccupation.ClientID %>").val(ui.item.label);
                  return false;
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:TCBob
ID: 38744525
just implemented.

The hidden value doesn't get picked up, still picking up the label when submitting.

Thanks for trying though !
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38744542
replace your hidden field by a textfield and let me know if you don't see the value after autocomplete
0
 

Author Comment

by:TCBob
ID: 38750099
ok will give that a try
0
 

Author Comment

by:TCBob
ID: 38753900
thanks for your attempts on this. We have used a hidden field but needed to also do some work on the vb side of things on the site
0
 

Accepted Solution

by:
TCBob earned 0 total points
ID: 38753908
The jquery advice was helpful but ultimately we resolved the issue by amending our vb code in conjunction with the jquery I had worked on
0
 

Author Closing Comment

by:TCBob
ID: 38769783
we had to change our own vb code to enable the hidden field to be picked up in the jquery
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

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 …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)

708 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

16 Experts available now in Live!

Get 1:1 Help Now