I'm doing assignment, and essentially what I would like to do it have an autocomplete on the input box so the user can select a 'Starter' and 'Main' from a JSON file. When inputting characters, a dropdown list is displayed, but it is not populated with values.
The JSON file (spanish.php) is:
([{"course":"starter","name":"Chorizo Sausage Rolls","price":"5.99"},{"course":"starter","name":"Sardines in Lemon Sauce","price":"6.99"},{"course":"starter","name":"Spanish Tortilla","price":"5.99"},{"course":"starter","name":"Escabeche","price":"4.99"},{"course":"main","name":"Seafood Paella","price":"13.99"},{"course":"main","name":"Albondigas Soup","price":"9.99"},{"course":"main","name":"Linguine with Mussels","price":"13.99"},{"course":"main","name":"Spanish Rice with Shrimp","price":"11.99"},{"course":"main","name":"Roasted Red Pepper Salad","price":"8.99"},{"course":"main","name":"Chorizo Fritatta","price":"10.99"},{"course":"main","name":"Lamb Meatballs","price":"12.99"}]);
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( "#starter" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 2,
} );
} );
</script>
And the HTML:
<label for="starter">Choose starter</label>
<input type="text" name="starter" id="starter"><br>
<label for="main">Choose main</label>
<input type="text" name="main" id="main"><br>
As I said, the list is returning nothing when 2+ digits are entered. Do I need to ask for it just starters? Am I goin about this correctly? I will be asking the user to choose a starter and main, then submitting the form.
Thanks.
I'm giving here a solution for auto-completing the starter menu. Hope that you can do the same for main menu searching. Or comment in this answer, if you're facing any problem implementing this.