空白を返すオートコンプリート（JqueryUI）

私は割り当てを行っています。基本的には入力ボックスにオートコンプリートがあるので、ユーザーはJSONファイルから 'Starter'と 'Main'を選択できます。文字を入力すると、ドロップダウンリストが表示されますが、値が入力されません。空白を返すオートコンプリート（JqueryUI）

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桁以上の数字を入力すると何も返されません。私はそれをちょうど始動のために頼む必要がありますか？私はこれについて正しく行きますか？私は、スターターとメインを選択し、フォームを提出するようにユーザーに求めます。

ありがとうございました。

出典

2016-12-28 Tatws24

ここでは、スターターメニューの自動補完のための解決策を示します。メインメニューの検索でも同じことができることを願っています。これを実装する際に問題が発生している場合は、この回答にコメントしてください。

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

出典

2016-12-30 11:03:02

素晴らしい！ご協力いただきありがとうございます。あなたは私を助けてくれません。 – Tatws24

あなたはどのように私も価格を追加するか知っていますか？ – Tatws24

価格で検索することを意味しましたか？ –

空白を返すオートコンプリート（JqueryUI）

答えて

関連する問題