使用ajax的Jquery自动建议

Jquery autosuggest with ajax

本文关键字：Jquery ajax 使用      更新时间：2023-09-26

我正在尝试实现一种自动建议与动态添加的输入框一起工作的方式。静态输入类型的一切都很好。我能够使用静态输入类型通过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/使用此功能。

相关文章：