JQuery Autocomplete displaying empty select list

LyndonOHRC · Feb 11, 2016

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="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">[/URL]
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>[/URL]
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>[/URL]
</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

LyndonOHRC · Feb 11, 2016

Nevermind

...

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.[b]value[/b]);
 $('#RecNum').val(ui.item.id);
}

Return Set:

Code:

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

]

Lyndon

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

JQuery Autocomplete displaying empty select list

LyndonOHRC

Programmer

LyndonOHRC

Programmer

Similar threads

Part and Inventory Search

Sponsor