Question

我正在做作业，基本上我想做的就是在输入框上有一个自动完成功能，这样用户就可以从JSON文件中选择“Starter”和“Main”。输入字符时，会显示下拉列表，但不会填充值。

JSON文件（spanish.php）是：

([{"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"}]);

这是我的代码：

<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>

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>

正如我所说，当输入2位数字时，列表没有返回任何内容。我是否需要首先要求它？我正确地谈论这个吗？我将要求用户选择一个启动器和主菜单，然后提交表单。

感谢。

Answer 1

我在这里给出了一个自动完成入门菜单的解决方案。希望你可以为主菜单搜索做同样的事情。如果您在实施此问题时遇到任何问题，请在此答案中发表评论。

<!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>

自动完成（JqueryUI）返回空白

1 个答案: