CODEWITHSUNDEEP
jsonajaxformsjquery-uijquery-ui-autocomplete
Tatws24
Tatws24

Reputation: 107

Autocomplete (JqueryUI) returning blank

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.

Upvotes: 0

Views: 54

Answers (1)

Aminur Rashid
Aminur Rashid

Reputation: 769

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.

<!doctype html>
<html lang="en">

<head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        var starterSearchData;
        $(function() {
            $.ajax({
                url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
                dataType: "jsonp",
                async: false,
                success: function(data) {
                    starterSearchData = $.map(data, function(item) {
                        if (item.course == "starter")
                            return item.name;
                    });
                    EnableAutoComplete();
                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });

            function EnableAutoComplete() {
                $("#starter").autocomplete({
                    source: starterSearchData,
                    minLength: 2,
                    delay: 100
                });
            }
        });
    </script>
</head>

<body>
    <label for="starter">Choose starter</label>
    <input type="text" name="starter" id="starter">
</body>

</html>

Upvotes: 1

Related Questions