Menu
We are using the autocomplete jQuery plugin written by Jörn Zaefferer, and are trying to verify a valid option is entered.
The plugin has result() event which fires when a selection is made. This is OK, but I need to check the value in the textbox when a user clicks out too. So we have tried a .change() and .blur() events, but they both pose an issue: when you click on an entry in the results div (the 'suggest' list) the .change() and .blur() events fire, and this is before the plugin has written a value to the textbox, so there is nothing to verify at this point.
Could someone help me configure events so whenever someone clicks away, but not in the results box I can check for a valid value in the box. If this is the wrong approach please inform me of the correct one. We originally went with this plugin because of its 'mustMatch' option. This option doesn't seem to work in all cases. Many times a valid entry will be written into the textbox and then cleared by the plugin as invalid, I have not been able to determine why.
Basic Code example:
<html>
<head>
<title>Choose Favorite</title>
<script language="JavaScript" src="jquery-1.3.2.min.js" ></script>
<script language="JavaScript" src="jquery.autocomplete.min.js" ></script>
<script>
$(".suggest").autocomplete("fetchNames.asp", {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:false,
cacheLength:20,
max:20
});
$(".suggest").result(function(event, data, formatted) {
var u = this;
// Check value here
});
/* OR */
$(".suggest").change(function(me) {
//check value here
});
</script>
</head>
<body>
<label for="tbxName">Select name (I show 10):</label><br />
<INPUT type="text" id="tbxName" name="tbxName" class="suggest"><br />
</body>
</html>
843
I think rather than writing your own function to verify if the data matches, you can just call search(). If result() is called with a null data parameter, then you know that auto-complete wasn't used and by calling search() on blur, you're guaranteed to get result() called at least once.
I've posted this code for a similar question, it may help here as well.
autocompleteField.result(function(event, data, formatted) {
if (data) {
//auto-complete matched
//NB: this might get called twice, but that's okay
}
else {
//must have been triggered by search() below
//there was no match
}
});
autocompleteField.blur(function(){
autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn't used
});
UPDATE: This should work. I am loading the list of names into an Array called ListOfNames, this is used in the onBlur() event to verify the name entered against the data. You may need to do some tweaks, but I think it should do what you're looking for.
var listOfNames = [];
$(document).ready(function(){
$.get("fetchNames.asp", function(data){
listOfNames = data.split("\r\n");
});
$(".suggest").autocomplete("fetchNames.asp", {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:false,
cacheLength:20,
max:20
});
$("#tbxName").blur(function(){
if(!listOfNames.containsCaseInsensitive(this.value)){
alert("Invalid name entered");
}
});
});
Array.prototype.containsCaseInsensitive = function(obj) {
var i = this.length;
while (i--) {
if (this[i].toUpperCase() === obj.toUpperCase()) {
return true;
}
}
return false;
}
This is the code I have used in the past. Very clean and simple.
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#currentSelectedLevel" ).autocomplete({
source: availableTags,
change: function( event, ui ) {
val = $(this).val();
exists = $.inArray(val,availableTags);
if (exists<0) {
$(this).val("");
return false;
}
}
});
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
