INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

JQuery Autocomplete displaying empty select list

JQuery Autocomplete displaying empty select list

(OP)
I'm modifying a tutorial so I can learn to use auto suggest, can't seem to get it to work.

The persons name is not displaying in the select, it is displaying an empty list with the correct row count??? Also, when a row is selected in this empty list the "Search" input tag is not being populated but the "RecNum" input is.

Probably a simple problem but I seem can't spot it. Any help appreciated.


My source data seems to be returning in the proper format.

CODE

[
 {"LicenseeName":"ANDREWS, TONI SMITH","RecNum":"41787"},
 {"LicenseeName":"COLE, SMITH","RecNum":"56469"},
 {"LicenseeName":"FOTOU, MARK SMITH","RecNum":"84872"},
 {"LicenseeName":"GOLDSMITH, COTHEIA LASHAUN","RecNum":"89302"}
] 

Source:

CODE

<!DOCTYPE HTML>
<html>
<head>
	<title>
		Name Search 
	</title>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>

<form action="index.cfm"  method="post">
	<fieldset>
		<legend>
			jQuery Autocomplete Name Search
		</legend>
		<label for="Licensee">
			Licensee: 
		</label>
	    <input type="text" id="Search" name="Licensee" size="45" autocomplete="off" />
		<label for="RecNum">
			Record Number: 
		</label>
		<input type="text" id="RecNum" name="RecNum" size="6" autocomplete="off" />
	</fieldset>
	<input name="Submit" type="submit" value="Submit">
</form>
<script type="text/javascript">

$('#Search').val(');
$('#RecNum').val(');
	
$(function() {
	$("#Search").autocomplete({
		source: "suggestListData.cfm",
		minLength: 2,
		select: function(event, ui) {
			$('#Search').val(ui.item.LicenseeName);
			$('#RecNum').val(ui.item.RecNum);
		}
	});
});
</script>
</body>
</html> 



Lyndon

RE: JQuery Autocomplete displaying empty select list

(OP)
Nevermind sleeping2...

The JSON return data must be labeled value, then that element named value will populate the select list.

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

CODE

select: function(event, ui) {
 $('#Search').val(ui.item.value);
 $('#RecNum').val(ui.item.id);
} 
Return Set:

CODE

[
 {"value":"BURTON, RIVER JONEY","id":"79142"},
 {"value":"CARGLE, DEJUAN JONETEA","id":"64511"},
 {"value":"JONES, AL LEE","id":"65630"}

] 


Lyndon

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close