自動完成動態生成的文本框

我需要使用jquery自動填充來填充動態生成的文本框。自動完成動態生成的文本框

工作流程：

1.On點擊添加行按鈕，一個行將被插入。

2.1936插入的行，產品文本框應通過自動complete.The同樣的方式填補所有動態生成的文本框應自動完成

問題填寫：

我已經使用jquery自動完成功能來填充文本框，但自動完成功能僅適用於第一行的文本框。我需要通過自動完成功能填充所有動態創建的文本框。

這是我的代碼。

<html> 
<head> 
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script> 
<script src="JS/jquery.autocomplete.js"></script> 
<script> 
jQuery(function(){ 
$("#product").autocomplete("Productset.jsp"); 
}); 
</script> 

<script type="text/javascript"> 

     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var colCount = table.rows[0].cells.length; 

      for(var i=0; i<colCount; i++) { 

       var newcell = row.insertCell(i); 

       newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 

        case "select-one": 
          newcell.childNodes[0].selectedIndex = 0; 
          break; 
       } 
      } 
     } 

     function deleteRow(tableID) { 

     try { 

      var table = document.getElementById(tableID); 

      var rowDelete = table.rows.length - 1; 

      if (rowDelete > 1) 

       table.deleteRow(rowDelete); 

      else 

      alert("Cannot delete all the rows.") 
     } 

     catch(e) { 

      alert(e); 
     } 
    } 
    </script> 

</head> 

<body> 
<form> 

     <input type="button" value="Add Row" onclick="addRow('dataTable')" /> 

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

    <br/> 
    <br/> 

    <table id="dataTable" align="center" width="350px" border="1"> 

    <tr> 
     <th> Product Name</th> 
      <th>Quantity</th> 
     <th> Brand</th>  

    </tr> 

    <tr> 

    <td> <input type="text" name="pname" id="product" value="" /></td> &nbsp; 
    <td><input type="text" name="qty" value=""/></td> 
    <td><select name="brand"/> 
     <select> 
      <option value="select">SELECT</option> 

     </select> 
    </td> 
    </table> 
</form> 
</body> 
</html>

Productset.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@page import="java.sql.*"%> 
<%@page import="java.util.*"%> 

    <% 
    try{ 
    String s[]=null; 

    Class.forName("com.mysql.jdbc.Driver"); 
    Connection con =DriverManager.getConnection("jdbc:mysql://localhost:3306/pdt","root","root"); 
    Statement st=con.createStatement(); 
    ResultSet rs = st.executeQuery("select distinct product from productlist"); 

     List li = new ArrayList(); 

     while(rs.next()) 
     { 
      li.add(rs.getString(1)); 
     } 

     String[] str = new String[li.size()]; 
     Iterator it = li.iterator(); 

     int i = 0; 
     while(it.hasNext()) 
     { 
      String p = (String)it.next(); 
      str[i] = p; 
      i++; 
     } 

    //jQuery related start 
     String query = (String)request.getParameter("q"); 

     int cnt=1; 
     for(int j=0;j<str.length;j++) 
     { 
      if(str[j].toUpperCase().startsWith(query.toUpperCase())) 
      { 
       out.print(str[j]+"\n"); 
       if(cnt>=5)// 5=How many results have to show while we are typing(auto suggestions) 
       break; 
       cnt++; 
      } 
     } 
    //jQuery related end 

rs.close(); 
st.close(); 
con.close(); 

} 
catch(Exception e){ 
e.printStackTrace(); 
} 


%>

來源

2016-05-30 sound

在我的代碼中動態創建文本框不走jQuery自動完成功能。因此，在addrow（）方法中包含自動完成功能將使用自動完成數據填充動態創建的文本框。

id選擇器將只填充第一個帶有自動完成數據的文本框。所以在jquery函數中使用這個$('input[name="product"]').auto complete("Productset.jsp");來填充所有的文本框。

這是完整的代碼。

<html> 
<head> 
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script> 
<script src="JS/jquery.autocomplete.js"></script> 
<script> 
jQuery(function(){ 
$("#product").autocomplete("Productset.jsp"); 
}); 
</script> 

<script type="text/javascript"> 

     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var colCount = table.rows[0].cells.length; 

      for(var i=0; i<colCount; i++) { 

       var newcell = row.insertCell(i); 

       newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          jQuery(function(){ 
       $('input[name="product"]').autocomplete("Productset.jsp"); 
           }); 

            break; 

        case "select-one": 
          newcell.childNodes[0].selectedIndex = 0; 
          break; 
       } 
      } 
     } 

    </script> 

</head> 

<body> 
<form> 

     <input type="button" value="Add Row" onclick="addRow('dataTable')" /> 

    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 

    <br/> 
    <br/> 

    <table id="dataTable" align="center" width="350px" border="1"> 

    <tr> 
     <th> Product Name</th> 
      <th>Quantity</th> 
     <th> Brand</th>  

    </tr> 

    <tr> 

    <td> <input type="text" name="product" id="product" value="" /></td> &nbsp; 
    <td><input type="text" name="qty" value=""/></td> 
    <td><select name="brand"/> 
     <select> 
      <option value="select">SELECT</option> 

     </select> 
    </td> 
    </table> 
</form> 
</body> 
</html>

來源

2016-06-02 10:11:13 sound

您需要在添加新行，你應該再次調用自動完成功能調用jQuery的自動完成功能 '開啓' 功能

$(document).on("focus","#product",function(e){ 
$(this).autocomplete("Productset.jsp"); 
});

來源

2016-05-30 10:06:04 Muthu

它不工作！還有其他解決方案嗎？ – sound

$("#button").click(function(e) { 
    addRow(); 
    $(".auto").autocomplete({ 
     source: datas 
    }); 
});

https://jsfiddle.net/w78L1ho2/

如果您的Productset.jsp沒有移動，我建議只調用一次。

爲了填補你的DATAS與您的文本文件，你可以做這樣的事情（轉換文本文件到陣列來自https://stackoverflow.com/a/6833016/5703316）：

var datas = []; 

    function func(data) { 
    datas.push(data); 
    } 

    function readLines(input, func) { 
    var remaining = ''; 

    input.on('data', function(data) { 
     remaining += data; 
     var index = remaining.indexOf('\n'); 
     var last = 0; 
     while (index > -1) { 
     var line = remaining.substring(last, index); 
     last = index + 1; 
     func(line); 
     index = remaining.indexOf('\n', last); 
     } 

     remaining = remaining.substring(last); 
    }); 

    input.on('end', function() { 
     if (remaining.length > 0) { 
     func(remaining); 
     } 
    }); 
    } 

    $.get("Productset.jsp").done(function(result) { 
    readLines(result, func); 
    });

來源

2016-05-30 10:06:41

該解決方案對於默認數據集合正常工作，但在我的情況下，數據來自數據庫。那麼如何處理？ – sound

您必須執行ajax請求來填寫您的列表。有了這樣的東西（取決於服務器結果）'$ .get（「Productset.jsp」）。done（function（result）{datas = result}）;' –

除了使用ajax以外，還有其他方法嗎？我需要通過使用javascript從數據庫（Productset.jsp）獲取數據來自動填充文本框 – sound

自動完成動態生成的文本框

回答

相關問題