Situation:
Currently I have a search box utilizing jQuery’s autocomplete plugin that allows the user to search for a sport’s team and then once found select on a submit button where it appends the team as a list item (preferable functionality would be when the user clicks on the actual team to append the item but at this point I am unsure of how to apply an on click function to the autocomplete drop down – suggestions welcome).
I am looking for a way to associate the newly appended list item to a predefined class or id so that certain formatting and displays are applied to the appended list item as soon as it is appended.Basically the user can search for any team in the NHL, NFL, etc. and I need to pair text colors and logos with them depending on which team they select - but the logos will appear separately in the body not in the list.
Example Code:
<!doctype html>
<html>
<head>
<title>TEST</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://ift.tt/1ClUJ5Q">
<script src="http://ift.tt/1dLCJcb"></script>
<script src="http://ift.tt/1ClULus"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
</head>
<body>
<div class="ui-widget">
<input id="tags" type="text" placeholder="Search Teams"/>
<input id="submit" type="submit"/>
</div>
<ul class="target">
</ul>
<script>
$(function() {
var availableTeams = [
"Boston Red Sox",
"New England Patriots",
"Boston Celtics",
"Boston Bruins",
"New England Revolution"
];
$( "#tags" ).autocomplete({
source: availableTeams
});
});
$('#submit').click(
function() {
var term = $('#tags').val();
$('.target').append("<li>"+term+"</li>");
}
);
</script>
</body>
</html>
I have tried using a combination of if statements and document.getElementById to try and alter the html content but I cannot piece my thoughts together.
My thoughts:
if (tags == "Boston Red Sox") { Then append "Boston Red Sox" with specific formatting as a list Item and corresponding logo below. } else { dont do anything }
http://ift.tt/1Buwuq9 (ideally when appended it would resemble something like the fiddle). Any input is greatly appreciated.
Aucun commentaire:
Enregistrer un commentaire