I've got the jQuery autofill script working to populate my text box as the user types to recomend results.
$( "#tags" ).autocomplete({
source: availableTags,
open: function(event, ui) {
$(".ui-autocomplete").css({
'width' : '600px'
});
}
});
});
What I need it to do is stop searching inside of the options and just search from the first letter.
For instance if an option is "Blue" and the user types "Bl" then "Blue" should populate like it does, but I don't want the user to type in "ue" and have "Blue" appear as an option.
EDIT: based on the post below I'm trying this script but it doesn't seem to work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Real Autocomplete</title>
<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script>
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: function( request, response ) {
var matches = $.map( availableTags, function(tag) {
if ( tag.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return tag;
}
});
response(matches);
}
});
</script>
</head>
<body>
<label for="tags">Tags: </label>
<input id="tags">
</body>
</html>