Question

我正在尝试在我的aspx页面中生成动态html文本框，并且在这些文本框中我想使用自动完成工具添加值。我尽力这样做。我几乎尝试了每个问题的stackoverflow的答案。但是在我的脚本中没有任何工作可以生成新的文本框dynmacally

<script type="text/javascript">
    $(document).ready(function () {

        var counter = 2;

        $("#addButton").click(function () {

            if (counter > 5) {
                alert("Limit Exceeds");
                return false;
            }

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

//            newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
//        '<input type="text" name="textbox' + counter +
//        '" id="textbox' + counter + '" value=""  class="auto">');

            newTextBoxDiv.after().html('<div class="fields-left"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="fields-right"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter+1 + '" class="auto"/> </div>');
           newTextBoxDiv.appendTo("#TextBoxesGroup");


            counter++;
        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }

            counter--;

            $("#TextBoxDiv" + counter).remove();

        });


    });


</script>

Html代码

  <div id="TextBoxDiv1" class="fields" >
         <div id="TextBoxesGroup">
         </div>
    </div>
         <input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
          </div>

我正在尝试使用这个json代码来获取自动生成的第一个文本框的数据。首先，我认为为每个动态生成的文本框编写此脚本，但这个过程将是如此冗长和错误的方式来做这件事。但这对我不起作用

<script type="text/javascript">
              $(document).ready(function () {
                  SearchText2();
              });
              function SearchText2() {
                  $("#textbox2").autocomplete({
                      source: function (request, response) {
                          $.ajax({
                              type: "POST",
                              contentType: "application/json; charset=utf-8",
                              url: "Home.aspx/GetAutoCompleteData",
                              data: "{'code':'" + document.getElementById('textbox2').value + "'}",
                              dataType: "json",
                              success: function (data) {
                                  response(data.d);
                              },
                              error: function (result) {
                                  alert("Error");
                              }
                          });
                      }
                  });
              }
</script>

请专家告诉我为什么这个json正在为我工作

由于

Answer 1

请使用以下代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Web.Home" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript">
          var counter = 2;
          $(document).ready(function () {

              $("#addButton").click(function () {
                  if (counter > 5) {
                      alert("Limit Exceeds");
                      return false;
                  }
                  var $wrap = $('#TextBoxesGroup');
                  var dynamichtml = '<div class="fields-left" id="divleft_' + counter + '"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="fields-right" id="divright_' + counter + '"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div>';
                  $wrap.append(dynamichtml);
                  counter++;
              });

              $("#removeButton").click(function () {
                  if (counter == 1) {
                      alert("No more textbox to remove");
                      return false;
                  }

                  counter--;
                  $("#TextBoxesGroup").find("#divleft_" + counter).remove();
                  $("#TextBoxesGroup").find("#divright_" + counter).remove();


              });
              $(".auto").live("focus", function () {

                  $(this).autocomplete({
                      minLength: 2,
                      source: function (request, response) {
                          var textval = request.term; // $(this).val();
                          $.ajax({
                              url: "Home.aspx/GetAutoCompleteData", type: "POST", dataType: "json",
                              contentType: "application/json; charset=utf-8",
                              data: JSON.stringify({ code: textval }),
                              success: function (data) {
                                  response(data.d);
                              },
                              error: function (result) {
                                  alert("Error");
                              }
                          });
                      }, select: function (event, ui) {
                          return false;
                      }
                  });
              });
          });

</script>
       <style type="text/css">
      .ui-menu { width: 150px; }
      </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="TextBoxDiv1" class="fields" >
         <div id="TextBoxesGroup">
         </div>
    </div>
         <input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
          </div>
    </form>
</body>
</html>

在.cs文件中

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace Web
{
    public partial class Home : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

            }
        }
        [WebMethod]
        public static List<string> GetAutoCompleteData(string code)
        {
            List<string> list = new List<string>(); 
            list.Add("delhi");
            list.Add("noida");
            list.Add("gurgaon");
            return list.Where(i => i.StartsWith(code)).ToList();
        }

    }
}

请按以下方式添加js文件 add js file

Answer 2

我建议你使用全局变量说data来存储为自动完成而重新定义的json响应。

然后在附加内容后使用相同的数据绑定自动完成。

  $('#newTextBoxDiv input').autocomplete(data);

如何在asp.net中为动态生成的文本框添加自动完成json

2 个答案: