jquery自动完成动态生成的文本框

我是jquery的新手，我正在研究一个需要动态地使用自动完成工具生成文本框的网页。我不知道如何绑定事件与生成的文本框。我的代码如下：jquery自动完成动态生成的文本框

$(document).ready(function() { 

    var counter = 1; 

    $(".addButton").live("click", function() { 

     var newTextBoxDiv = $(document.createElement('div')) 
    .attr("id", 'TextBoxDiv' + counter); 

     newTextBoxDiv.html('<TABLE><TR><TD>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;</TD></TR></TABLE>'); 

     newTextBoxDiv.appendTo("#TextBoxesGroup"); 
     counter++; 
    }); 
});

和后期查询

function fillTextBox(text) { 
    $.ajax(
     { 
      type: 'POST', 
      url: '@Url.Action("_AutoCompleteAjaxLoading", "CommandEntity")', 
      async: true, 
      data: { text: text}, 
      dataType: "json", 
      traditional: true, 
      success: function(data) { 
       //what I should do here? 
      }, 
      error: function(xhr, ajaxOptions, thrownError) { 

      } 
     }); 
}

来源

2012-02-27 user571874

我真的不明白你想在第一个代码块中实现什么。你绑定点击一个“.addButton”元素，并在处理程序中创建该元素...此外，什么会返回ajax请求？这两个代码块之间的关系是什么？ – 2012-02-27 11:25:14

ajax请求返回集合列表。我需要使用生成的文本框绑定函数fillTextBox。 fillTextBox在用户开始输入时调用 – user571874 2012-02-27 11:26:50

还有一个类似的线程http://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element – PraveenLearnsEveryday 2012-02-27 11:28:29

您可以使用jquery ui autocomplete插件：

控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult _AutoCompleteAjaxLoading(string term) 
    { 
     var data = new[] { "item 1", "item 2", "item 3" }; 
     return Json(data, JsonRequestBehavior.AllowGet); 
    } 
}

查看：

<script type="text/javascript"> 
    $(function() { 
     setupAutoComplete(); 
     var counter = 2; 
     $('#TextBoxesGroup').delegate('a.addButton', 'click', function (evt) { 
      evt.preventDefault(); 
      $('<table/>', { 
       html: $('<tr/>', { 
        html: $('<td/>', { 
         html: $('<input/>', { 
          type: 'text', 
          id: 'textbox' + counter, 
          name: 'textbox' + counter 
         }) 
        }).after($('<td/>', { 
         html: $('<a/>', { 
          href: '#', 
          'class': 'addButton', 
          text: 'Add' 
         }) 
        })) 
       }) 
      }).appendTo('#TextBoxesGroup'); 
      setupAutoComplete(); 
      counter++; 
     }); 
    }); 

    var setupAutoComplete = function() { 
     $(':text[name^="textbox"]').autocomplete({ 
      source: '@Url.Action("_AutoCompleteAjaxLoading")', 
      minLength: 2, 
      select: function (event, ui) { 

      } 
     }); 
    }; 
</script> 

<div id="TextBoxesGroup"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" name="textbox1" id="textbox1" value="" /> 
      </td> 
      <td> 
       <a href="#" class="addButton">Add</a> 
      </td> 
     </tr> 
    </table> 
</div>

来源

2012-02-27 14:00:43

林真的不知道你有什么需要或者。尝试添加如下一行

$('#textbox' + counter).keypress(function(){ 
    // here trigger autocomplete event 
})

或者

$('#textbox' + counter).keypress(fillTextBox($(this).val()))

来源

2012-02-27 11:32:28

jquery自动完成动态生成的文本框

回答

相关问题