Menu
I have an autocomplete text box that needs to respond to 2 events:
focusout to assume when the user is done typing. So, if a user tabs out of a text box, it means the user is done typing.)select event to determine that)The Problem:
When the user selects an item in the autocomplete list of values, the chain of event is such that focusout is called first, then the select. When in focusout, I only have access to what the user typed, not what the user selected om the autocomplete list of values -- and that's what I actually need. How do I solve this problem?
Steps to Reproduce the Problem:
a
ActionScript from the autocomplete list of valuesObserve console.debug messages:
focusout event called a select event called ActionScript
Here's the code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<title>Data Matching</title>
</head>
<body>
<form>
<input id="1" type="text"></input>
<input id="2" type="submit"></input>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$('#1').autocomplete(
{
select: function (event, ui)
{
"use strict";
console.debug('select event called');
console.debug(ui.item.value);
},
source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"],
minLength: 1
});
$('#1').focusout(function ()
{
"use strict";
console.debug('focusout event called');
console.debug($(this).attr('value')); // At this point, I need the value that was selected from autocomplete. I only get the value that the user typed, though
});
</script>
</body>
</html>
387
Advertisements. Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field.
autocomplete is not a function" jQuery error occurs for multiple reasons: Forgetting to include the jQuery UI library. Loading the jQuery UI library before the jQuery library. Loading the jQuery library twice.
The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source-option. 1.
Autocomplete search filter display suggestion based on the user input e.g. listing all products which start with the character 'a'. It makes easier for the user to search for an item from the list and select it from the suggestion list. Require jQuery AJAX for implementing this.
This is precisely why jQueryUI introduced a special change event for autocomplete:
Triggered when the field is blurred, if the value has changed; ui.item refers to the selected item.
This event can do double-duty for both of your requirements:
$("#1").autocomplete({
/* snip */
change: function(event, ui) {
if (ui.item) {
console.log("ui.item.value: " + ui.item.value);
} else {
console.log("ui.item.value is null");
}
console.log("this.value: " + this.value);
}
});
ui.item will not be defined when the user did not select a value from the list of autocomplete candidates. this.value will always be correct.Here's an example of this: http://jsfiddle.net/33GJb/
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
