Menu
I've created a simple auto-complete control using JQuery UI. I have a default value for the input field that reads "Enter your keywords...". I've set up a focus() event that will clear the input when a user sets the focus to the input field to being typing.
In IE when you being typing and the menu displays a list of items, when picking an item from the menu item focus() is called again. This extra call to focus() only happens in IE. The side effect is that the selected menu item is cleared from the text field.
I have a very primitive solution to this by making use of the autocomplete.focus() event. This event is fired when the user hovers over a selected menu item. Here I can set a global boolean variable that can be used to tell the focus() event on the input field that the menu item is active/visible and thus not to clear the input value. This is a hack, of course!
Is there an alternative (less hacky!) solution to this problem?
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autocomplete demo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
focus: function (event, ui) {
// This event fires when an item from the menu is selected (in focus)
// set some variable here to tell the focus() call to the text field not to clear the value from the input field
},
});
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" value="Enter your keywords..." />
</div>
</div>
</body>
</html>
With the slight tweak to this solution and with help from the provided answer this now works in IE 8 & 9.
$(document).ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
})
675
We had a similar issue and I believe we fixed it by adding a return false; to the focus method:
$("#tags").focus(function () {
// clear the input value
$("#tags").val("");
return false;
});
Also, it looked like you had an extra (trailing) comma after your focus declaration. Might want to clean that up.
UPDATE
After playing around with your code a bit in jsbin.com, I think I found the solution to your specific issue with IE, but I'm not 100% on why it only dies in IE.
Example: http://jsbin.com/aqituk/2/edit#javascript,html
The difference was changing the $(function() { ... to the full document ready function, $(document).ready(function() {...
Hope this helps!
175
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
