簡體   English   中英

jQuery自動建議使用Ajax

[英]Jquery autosuggest with ajax

我正在嘗試實現一種方法,其中自動建議將與動態添加的輸入框一起使用。 靜態輸入類型一切正常。 我能夠通過具有靜態輸入類型的Ajax請求和檢索結果。 但是,當我嘗試對動態輸入執行相同的操作時,我的代碼在這里不起作用。 任何幫助,將不勝感激。

 <script src="js/jquery.js"></script>
 <script src="js/jquery.autoSuggest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript">
$.noConflict();
jQuery(function(){
    var rows = 0;

    jQuery('#addRow').click(function(){
        jQuery('#userRows').append('<div class="userRow"><input type="text" name="users['+rows+'][name]" /><input type="text" name="country" id="inputBox" /><input type="text" name="id-holder" id="id-holder"> <input type="text" id="price" name="users['+rows+'][price]" /><a href="javascript:;" class="removeRow">Remove</a> name="users['+rows+'][name]"<div>');
        rows++;
        location.reload();
    });

    jQuery(document).on('click', '.removeRow', function(){
        jQuery(this).closest('.userRow').remove();
    });

    // Below just used to show the string on submit

});
</script>
 <script type="text/javascript">

  <?php
  $pluginConf = "";
  if(isset($_GET) && count($_GET) > 0){
       extract($_GET);
  if($limit == "")  $limit = "10";
  if($width == "")  $width = "auto";
$pluginConf = '
$(function() {
  $("#inputBox").autoSuggest({

    ajaxFilePath     : "server.php", 
    ajaxParams       : "dummydata=dummyData",
    autoFill     : "'.$autofill.'",
    iwidth       : "'.$width.'",
    opacity      : "0.9",
    ilimit       : "'.$limit.'",
    idHolder     : "id-holder",
    prices   : "price",
    match        : "'.$match.'"
  });
  alert("Worked");
});';   
   } else {
 $pluginConf = ' 
  $(function() {
    $("#inputBox").autoSuggest({
        ajaxFilePath     : "server.php", 
        ajaxParams   : "dummydata=dummyData", 
        autoFill     : false, 
        iwidth       : "auto",
        opacity      : "0.9",
        ilimit       : "10",
        idHolder     : "id-holder",
        prices   : "price",
        match        : "contains"
    });
    alert("Worked");
  }); ';
 } 

  echo $pluginConf; 
 ?>
 </script>
</head>

<body>
 <div>
       Item Name @  Price
    </div>
<form  method="post" id="usersForm">
    <div id="userRows">
        <a href="javascript:;" id="addRow">Add Row</a><br />
    </div>


    <input type="submit" id="submit" value="Submit" />

    <!--<input type="text" name="xxx" id="inputBox">
<input type="text" name="id-holder" id="id-holder"> 
<input type="text" name="price" id="price"> -->
</form>
</body>
</html>

https://github.com/wuyuntao/jquery-autosuggest/blob/master/jquery.autoSuggest.js

查看代碼,似乎它僅將這些事件(焦點)附加到頁面加載時創建的元素上。 您將需要編寫一些其他代碼以將“建議”添加到生成的輸入元素中。

https://api.jquery.com/on/使用此功能。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM