HTML and CSS Reference
In-Depth Information
$.ajax({
url: searchPath,
cache: false,
dataType: “xml”,
success: function (data) {
$(data).find(“fruit”).each(
function () {
$('#searchResults').append($(this).text());
$('#searchResults').append(“<BR />”);
})
}
});
});
}
function InvalidSearchTerm() {
$('#searchResults').empty();
$('#searchResults').append('Invalid Search Term. Please try again.');
}
</script>
</head>
<body>
<div>
Enter search term: <input type=”text” id=”searchFruit”/>
<input type=”button” id=”searchButton” value=”Search”/>
</div>
<div>
<h1>Results:</h1>
</div>
<div id=”searchResults”>
</div>
</body>
</html>
In this listing, users are presented with a very simple user interface in which they can enter
a search term and retrieve a result set based on that search term. In this case, users can enter
one of the supported search terms and get back the data from the server. The data request is
made using AJAX and as such the entire page doesn't need to refresh, only the area that dis-
plays the results. The part of the page where the data is needed is the only part of the page
that is affected by the new data being received.
The first thing that this code does is set up an event listener for the search button click
event. All the magic occurs in this function. The search term is evaluated to ensure that it
matches one of the supported search terms. If it doesn't, the user is presented with a message
indicating this. If it does, the code proceeds to make an AJAX call to the server for the correct
data set that matches the search term. In this case, it's a hard-coded XML file. However, the
data source is irrelevant as long as the returned XML matches the schema that the webpage
expects so that it can be parsed and displayed.
Search WWH ::
Custom Search