6 Replies - 2986 Views - Last Post: 09 August 2010 - 07:45 AM

#1 Guest_DecafJava*


Reputation:

Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 07 August 2010 - 11:13 PM

I am having a very strange problem with getting this simple Jquery Ajax Autocomplete plugin to work. I'm using a regular jquery ajax and as a user types, I keep calling the get-accounts.php script and sending in as a parameter the value they entered. Then, I'm calling the plugin's autocomplete() function and setting the source parameter to be the variable called data. When I manually set the source to ["test1", "test2", "test3"] it works like a charm, but for some reason, when I set it to the data variable, it fails to do the auto-complete. Please help! Thanks...

	$.ajax({
		type: "GET",
		url: "get-accounts.php?query="+$('#accountNumberField').val(),
		success: function(data) {
		        alert(data); //The alert confirms data is returned in correct format.
			$('#accountNumberField').autocomplete({
				source: data
			});
		},
		error: function() {
			alert("There was an error grabbing account number suggestions.");
		}
	});



Is This A Good Question/Topic? 0

Replies To: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

#2 Guest_decafjava*


Reputation:

Re: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 07 August 2010 - 11:17 PM

View PostDecafJava, on 07 August 2010 - 10:13 PM, said:

I am having a very strange problem with getting this simple Jquery Ajax Autocomplete plugin to work. I'm using a regular jquery ajax and as a user types, I keep calling the get-accounts.php script and sending in as a parameter the value they entered. Then, I'm calling the plugin's autocomplete() function and setting the source parameter to be the variable called data. When I manually set the source to ["test1", "test2", "test3"] it works like a charm, but for some reason, when I set it to the data variable, it fails to do the auto-complete. Please help! Thanks...

	$.ajax({
		type: "GET",
		url: "get-accounts.php?query="+$('#accountNumberField').val(),
		success: function(data) {
		        alert(data); //The alert confirms data is returned in correct format.
			$('#accountNumberField').autocomplete({
				source: data
			});
		},
		error: function() {
			alert("There was an error grabbing account number suggestions.");
		}
	});




I just wanted to clerify that what comes in as the data variable is actually in correct format (such as ["aaa", "bbb", "ccc"], but it still doesn't work dynamically (only works if I manually set source to the string ["aaa", "bbb", "ccc"]).
Was This Post Helpful? 0

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 08 August 2010 - 12:03 AM

If the data that is being returned is a string, then it will not work as expected.
That is:
["one", "two"] != '["one", "two"]'



Try setting the dataType attribute on the ajax call to json. That should return it as an JSON object rather than a string.
$.ajax({
	type: "GET",
	dataType: "json",
	url: "get-accounts.php?query="+$('#accountNumberField').val(),
	success: function(data) {
	        alert(data); //The alert confirms data is returned in correct format.
		$('#accountNumberField').autocomplete({
			source: data
		});
	},
	error: function() {
		alert("There was an error grabbing account number suggestions.");
	}
});


Was This Post Helpful? 0
  • +
  • -

#4 Guest_decafjava*


Reputation:

Re: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 08 August 2010 - 12:38 AM

Thanks!! Your advice worked like a charm!!

Except a new issue now: how come after I select a value from the suggestion list, then the suggestions list stays open?
Was This Post Helpful? 0

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 08 August 2010 - 10:41 PM

Not sure. That shouldn't happen. Not based on that small example, anyways.

Could you show us more of the code? (The <input> this belongs to, and all the Javascript that's related to it.)
Or better yet, give us a link to the page you are working on?
Was This Post Helpful? 0
  • +
  • -

#6 Guest_decafjava*


Reputation:

Re: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 09 August 2010 - 07:41 AM

<script type="text/javascript">
	//Initialization code:
	$(document).ready(function() {
		//Auto-complete ajax setup:
		$("#accountNumberField").keyup(getAccountSuggestions);
	});
	function getAccountSuggestions() {
		$.ajax({
			type: "GET",
			dataType: "json",
			url: "get-accounts.php?query="+$('#accountNumberField').val(),
			success: function(data) {		
				var a = $('#accountNumberField').autocomplete({
					lookup: data,				
					minChars: 2,					
					maxHeight: 400,
					width: 90,
					zIndex: 9999,
					deferRequestBy: 0,
					noCache: true
				});
			}
		});
	}
</script>

//Inside the HTML:
..................

<span id="accountNumberFieldDiv">
	<label class="label" for="accountNumberField">Account #: </label>
	<input class="input" type="text" id="accountNumberField" name="accountNumberField" style="width: 90px;" />
</span>



By the way, I ended up using the lookup property instead of source (source would not work for some reason).
Was This Post Helpful? 0

#7 Guest_decafjava*


Reputation:

Re: Why Won't This Simple Jquery Ajax Autocomplete Plugin Work!

Posted 09 August 2010 - 07:45 AM

So basically what the problem is that after selecting an item from the suggestion list that comes up, the suggestion box kinda stays around (it does close up eventually or when focus goes to another input box on the form), but it kind of lags. I want it to instantly close right after a value is selected from list (similar to choosing an option from a regular HTML <select> box).
Was This Post Helpful? 0

Page 1 of 1