On my aspx page, I am trying to use autocomplete and validate that the form was filled out. However, when I use both libraries at the same time the autocomplete dropdown list is unable to be selected by mouse click but can be used with the arrow and enter keys. Is there anyway to use both of these packages together without this issue?
I copied the example from http://jqueryui.com/autocomplete/ and added the validation.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript"src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.validate.min.js") %>"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myForm').validate();
});
function vaidateForm() {
if (!$('#QAForm').valid()) return false;
alert("IS VALID");
};
</script>
<form id="myForm">
<div id="AssignTo">
<label for="tags" class="required">Tags: </label>
<input id="tags" />
</div>
<input type="button" onclick="vaidateForm()" value="Save" />
</form>
<script type="text/javascript">
$(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
});
});
</script>
Please see here: Working Demo http://jsfiddle.net/G3Qqc/1/
Validation plugin: http://docs.jquery.com/Plugins/Validation
This should fit your cause
:)Code