` with `id` of "suggestions."
+ This injected HTML looks pretty ugly, but it makes room for one other improvement. Users aren't likely to recognize all the suggested stocks by their symbols, so we can do them a favor by displaying company names instead:
$(document).ready(function() {
// create autocomplete
$('#form-quote input[name=symbol]').on('keyup', function() {
// load autocomplete data from suggest.php
$.ajax({
url: 'suggest_more.php',
type: 'POST',
dataType: 'json',
data: {
symbol: $(this).val()
},
success: function(response) {
// build html string for a list of suggestions
var suggestions = '
';
$('#suggestions').html(suggestions);
}
});
});
// set value of symbol field when a suggestion is clicked
$('#suggestions').on('click', '.suggestion', function() {
$('#form-quote input[name=symbol]').val($(this).attr('data-symbol'));
});
// load data via ajax when form is submitted
$('#form-quote').on('submit', function() {
// determine symbol
var symbol = $('#form-quote input[name=symbol]').val();
// send request to quote.php
$.ajax({
url: 'quote.php',
type: 'POST',
data: {
symbol: symbol
},
success: function(response) {
$('#price').text(response);
}
});
// since we're overridding form submission, make sure it doesn't submit
return false;
});
});
+ In our injected HTML, we're now listing the company names rather than the stock symbols. When one of those company names is clicked, the search box will be populated with the corresponding stock symbol. This stock symbol we actually get from the HTML of the list item itself. When we created this HTML, we added an attribute named `data-symbol` that we can access like any other HTML attribute. We do this in the following lines:
// set value of symbol field when a suggestion is clicked
$('#suggestions').on('click', '.suggestion', function() {
$('#form-quote input[name=symbol]').val($(this).attr('data-symbol'));
});
+ With this `on` method, we're assigning an anonymous function as the event handler for any click that occurs inside an element that has a `class` of `suggestion` within the "suggestions" `
`. This anonymous function assigns to the symbol search box the value of the `data-symbol` attribute of `$(this)`. `$(this)` gives us the element that was clicked, which in this case would be the list item representing the company name.
+ Let's add some functionality to our Portfolio page:
$(document).ready(function() {
// key pressed in search field, so filter table
$('#search').on('keyup', function() {
// determine symbol we're searching for
var query = $(this).val();
// iterate over each row in the table
$('#table-portfolio tbody tr').each(function(e) {
// check if the symbol cell contains the query
if (!query || $(this).children().first().text().toLowerCase().indexOf(query) > -1)
$(this).show();
// no match, so hide row
else
$(this).hide();
});
});
// load table into ticker
$('#table-portfolio tbody tr').each(function(e) {
// get the cells in the row
var children = $(this).children();
// add all rows to ticker except the last, which is cash
if (children.length > 2)
$('#ticker').append('' + children.eq(0).text() + ' ' + children.eq(3).text() + ' ');
});
// animate the ticker
function animateTicker() {
// move ticker text all the way off to the right
$('#ticker').css({ marginLeft: '100%' });
// animate ticker text all the way off to the left, and restart animation when done
$('#ticker').animate({ marginLeft: '-100%' }, 10000, 'linear', animateTicker);
}
// start animation loop
animateTicker();
});
+ This code implements a stock ticker as well as search functionality for our Portfolio page. The search functionality automatically filters the stock table as the user types into the search box. It does this by iterating over all the rows in the stock table, searching each for the user's query, and hiding them if they don't match. We retrieve all the rows in the stock table by using a JavaScript selector to get all `
` elements within the element with `id` of "table-porfolio." We iterate over these rows using the jQuery `each` method, which takes as input a function that is to be called with a row as its only argument, in this case `e`. To search each row for the user's query, we get all of the row's children using the `children` method, we take the first child using the `first` method, we convert it to lowercase text using the `text` and `toLowerCase` methods, and finally we look for the user's query as a substring using the `indexOf` method, which returns a non-zero index corresponding to the substring it has found.