onchange autocomplete
I have dates and description. If the date is entered, then the description should autocomplete. Like if 12/25/yyyy is selected, then Christmas should automatically be shown?
Code:
<html>
<head>
<script type="text/javascript">
$(function() {
$('#date').datepicker();
});
$(function() {
var availableTags = ["Christmas Day","etc"];
$("#tags").autocomplete({
source: availableTags
});
});
$('#date').change( function() {
if ($(this).val().substring(0, 5) === '12/25') {
$('#tags).val('Christmas');
} else {
$('#tags').val('');
}
});
</script>
<body>
<DIV class="ui-widget">Date: <INPUT TYPE="TEXT" name="xx"
property="xx" id="date" />
</P>
<input type="text" id="tags'" name="tags'" />
</DIV>
</body>
</html>
Last edited by oneofthelions; 07-12-2010 at 04:38 PM .
I tried if and else if and its not working.
Code:
<script type="text/javascript">
$(document).ready(function() {
$('#holidayDate').datepicker();
var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"];
$("#tags").autocomplete({source:availableTags});
$('#holidayDate').change(function() {
if ($(this).val().substring(0, 5) === '12/25') {
$('#tags').val('Christmas Day');
}
if ($(this).val().substring(0, 5) === '01/01') {
$('#tags').val('New years Day');
}
if ($(this).val().substring(0, 5) === '02/02') {
$('#tags').val('Groundhog Day');
}
if ($(this).val().substring(0, 5) === '02/14') {
$('#tags').val('Valentine's Day');
}
if ($(this).val().substring(0, 5) === '04/22') {
$('#tags').val('Earth Day');
}
if ($(this).val().substring(0, 5) === '10/12') {
$('#tags').val('Columbus Day');
}
if ($(this).val().substring(0, 5) === '07/04') {
$('#tags').val('Independence Day');
}
if ($(this).val().substring(0, 5) === '10/31') {
$('#tags').val('Halloween');
}
if ($(this).val().substring(0, 5) === '11/11') {
$('#tags').val('Veterans Day');
}
if ($(this).val().substring(0, 5) === '12/07') {
$('#tags').val('Pearl Harbor Remembrance Day');
}
else {
$('#tags').val('');
}
});
});
</script>
Solution is
Code:
<script type="text/javascript">
$(document).ready(function() {
$('#holidayDate').datepicker();
var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday",
"Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day",
"Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"];
$("#tags").autocomplete({source:availableTags});
$('#holidayDate').change(function() {
if ($(this).val().substring(0, 5) === '12/25') {
$('#tags').val('Christmas Day');
}
else if ($(this).val().substring(0, 5) === '01/01') {
$('#tags').val('New years Day');
}
else if ($(this).val().substring(0, 5) === '02/02') {
$('#tags').val('Groundhog Day');
}
else if ($(this).val().substring(0, 5) === '02/14') {
$('#tags').val('Valentine\'s Day');
}
else if ($(this).val().substring(0, 5) === '04/22') {
$('#tags').val('Earth Day');
}
else if ($(this).val().substring(0, 5) === '10/12') {
$('#tags').val('Columbus Day');
}
else if ($(this).val().substring(0, 5) === '07/04') {
$('#tags').val('Independence Day');
}
else if ($(this).val().substring(0, 5) === '10/31') {
$('#tags').val('Halloween');
}
else if ($(this).val().substring(0, 5) === '11/11') {
$('#tags').val('Veterans Day');
}
else if ($(this).val().substring(0, 5) === '12/07') {
$('#tags').val('Pearl Harbor Remembrance Day');
}
else {
$('#tags').val('');
}
});
});
</script>
Bad implementation.
Code:
var availableDates = ["01/01", "07/04"];
var availableTags = [ "New years Day", "Independence Day"];
Even better is 2d array or json but probably will need to be filtered into above.
Code:
var availableTags = [ ["01/01", "New years Day"], ["07/04", "Independence Day"]];
Code:
var availableTags = [ {date:"01/01", name:"New years Day"}, {date:"07/04", name:"Independence Day"}];
Last edited by letmehaveago; 07-13-2010 at 10:37 AM .
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks