2016-12-12 52 views
1

如何使用Ajax自動完成來構建錶行。自動完成代碼正在工作。如果用戶搜索值並單擊他們想要的值,我想將該值添加到我的表中。如果他們再次搜索,我想在第一個結果下追加該結果。但我無法找到一種方法從響應中構建表格行。這是代碼。使用Ajax和jQuery自動完成從Ajax響應(Json)構建錶行

還有一兩件事,我讀了一個兒子文件:

這是我的阿賈克斯,jQuery代碼

$.support.cors = true; 
 
$(document).ready(function ($) { 
 
    var items = []; 
 
    $("#addclass").autocomplete({ 
 
     source: function (request, response) { 
 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
 
      $.ajax({ 
 
       url: "php/Classes.php", 
 
       dataType: "json", 
 
       beforeSend: function() { 
 
        $("#search-box").css("background","#C0C0C0"); 
 
       }, 
 
       success: function (data) { 
 
        response($.map(data, function (value, i) { 
 
         var text = value.value; 
 
         if (text && (!request.term || matcher.test(text))) { 
 
          return { 
 
           ID: value.ID, 
 
           value: value.value 
 
          }; 
 
         } 
 
        }));   
 
       } 
 
      }); 
 
     } 
 
    }); 
 

 
    
 
});
table, th, td { 
 
    margin: 0% 0px 0px 20%; 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    border-spacing: 15px 0px; 
 
} 
 

 
th, td { 
 
    padding: 4px 10px 4px 10px;; 
 
    text-align: center; 
 
} 
 

 
This is my HTML code
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title></title> 
 
     <meta charset="UTF-8"> 
 
     <link rel="stylesheet" href="css/profile.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <script src="https://use.fontawesome.com/a8b13015aa.js"></script> 
 
     
 
     <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 
 
     <script>tinymce.init({selector: '#tinymce'});</script> 
 
     <script type="text/javascript" src="script/profile.js"></script> 
 
     <script type="text/javascript" src="plugin/tinymce/tinymce.min.js"></script> 
 
     <script type="text/javascript" src="plugin/tinymce/init-tinymce.js"></script> 
 
     <script src="script/profile.js"></script> 
 
    </head> 
 
    <body> 
 
        <div class="info"> 
 
         <label id ="classes">My Classes</label> 
 
         <table class = "table"> 
 
          <p></p> 
 
          <tr> 
 
           <th>Course ID</th> 
 
           <th>Course Name</th> 
 
           <th>Start Date/End Date</th> 
 
           <th>Credit Hours</th> 
 
          </tr> 
 
         </table> 
 
         <br> 
 
         <label id ="activity">HIGHT AND ACTIVITY</label> 
 
         <label id = "search"><input type="text" name="addclass" id="addclass" placeholder="Search for course"/></label> 
 
         <div id ="suggesstion"></div> 
 
         <label></label> 
 
        </div> 
 
     </section> 
 
    </body> 
 
</html>

我希望一些可以幫助我。

回答

0

我不太熟悉jQuery UI,但我剛剛閱讀了文檔,發現可以捕獲使用此事件偵聽器選擇的選項的值:http://api.jqueryui.com/autocomplete/#event-select

默認情況下,它只是使用所選項目的值自動完成輸入,但您可以通過取對象「ui」的值並將其附加到表格行來對其進行自定義。

下面是頁面末尾的一個非常明確的解釋https://www.tutorialspoint.com/jqueryui/jqueryui_autocomplete。我希望這可以幫助你