Question

我想为具有相同name属性的多个文本框应用一个自动完成扩展程序，例如。

我只想对所有拥有name="txtQtyPkgs"的人使用相同的自动填充扩展程序。我怎么能这样做？我的HTML

<table cellspacing="0" cellpadding="0" border="0" style="" id="flex1">
        <tbody>
            <tr id="rowGH03013">
                <td align="Left" class="sorted">
                    <div style="text-align: left; width: 150px;">
                        GH03013</div>
                </td>
                <td align="Left">
                    <div style="text-align: left; width: 150px;">
                        999</div>
                </td>
                <td align="Left">
                    <div style="text-align: left; width: 161px;">
                        <input align="right" type="text" width="30px" name="txtQtyPkgs" maxlength="3" onblur="IntegerOnly(this.id);"
                            id="QtyPkgs19523"></div>
                </td>
                <td align="Left">
                    <div style="text-align: left; width: 446px;">
                        <input align="left" type="text" width="300px" class="auto" maxlength="100" name="txtBuyerName"
                            id="Buyer19523"></div>
                </td>
            </tr>
            <tr class="erow" id="rowGH03011">
                <td align="Left" class="sorted">
                    <div style="text-align: left; width: 150px;">
                        GH03011</div>
                </td>
                <td align="Left">
                    <div style="text-align: left; width: 150px;">
                        999</div>
                </td>
                <td align="Left">
                    <div style="text-align: left; width: 161px;">
                        <input align="right" type="text" width="30px" name="txtQtyPkgs" maxlength="3" onblur="IntegerOnly(this.id);"
                            id="QtyPkgs19521"></div>
                </td>
                <td align="Left">
                    <div style="text-align: left; width: 446px;">
                        <input align="left" type="text" width="300px" class="auto" maxlength="100" name="txtBuyerName"
                            id="Buyer19521"></div>
                </td>
            </tr>
        </tbody>
    </table>

我的xml数据

<table>
  <userid>23</userid>
  <userdispname>GUJARAT PACKERS LTD</userdispname>
  <usercode>GTPL</usercode>
</table>

<table>
  <userid>26</userid>
  <userdispname>Lipton India Limited</userdispname>
  <usercode>Lipton</usercode>
</table>
<table>
  <userid>27</userid>
  <userdispname>TOSH LTD.</userdispname>
  <usercode>ATosh</usercode>
</table>
<table>
  <userid>28</userid>
  <userdispname>SERVICES INDIA PVT. LTD.</userdispname>
  <usercode>TSI</usercode>
</table>
<table>
  <userid>29</userid>
  <userdispname>Parekh Company</userdispname>
  <usercode>Parekh</usercode>
</table>
<table>
  <userid>30</userid>
  <userdispname>SHREE BALAJI CO.</userdispname>
  <usercode>Balaji</usercode>
</table>
<table>
  <userid>31</userid>
  <userdispname>Kesaria Company</userdispname>
  <usercode>Kesaria</usercode>
</table>

我的javascript

$(document).ready(function () {
            AuctoCmplBuyer();
            $(".auto").autocomplete({ source: [AuctoCmpData] });
        });
 function AuctoCmplBuyer() {
            $.ajax({
                type: "POST",
                url: "../service/WebService.asmx/XmlData",
                data: "{strData:'BuyerList'}",
                contentType: "application/json; charset=UTF-8",
                dataType: "xml",
                success: function (msg) {
                    $(msg).find('Table').each(function () {
                        if (StrData.length != 0) {
                            StrData = StrData + ",";
                        }
                        StrData = '{"id":"' + $(this).find('UserID').text() + '","label":"' + $(this).find('UserDispName').text() + '","value":"' + $(this).find('UserDispName').text() + '"}';
                    });
                }
            });
            AuctoCmpData = StrData;
        }

Answer 1

请为所有文本框添加一个公共类名，并使用jQuery自动填充功能完成。

 $(".auto").autocomplete({
        source: "../Ajax/AjaxGetData.ashx,
        minLength: 2,
        select: function(event, ui) {
            $(this).val(ui.item.value);
        }
    });

请参阅更多内容。 http://jqueryui.com/demos/autocomplete/#remote

我正在做的是创建一个名为auto的类并将其分配给所有文本框。因此，当用户输入值时，它将进入处理程序页面（asp.net），或者您可以使用.php页面。在那个处理程序页面中，我使用Sql的like运算符从数据库中选择数据。选择值Response.Write()（在asp.net中）或echo（在php中请参考）发送数据。数据以JSON格式发送

[ { "id":"XYZ" , "label":"XYZ" , "value": "XYZ"}]

以上是JSON的格式

对于所有自动建议，您可能拥有大量数据。为此，您必须获取执行查询后返回的结果总数并进行循环。初始化字符串变量，其默认值为{{ 1}}到开头并用"["附加字符串（这构成一个JSON对象）。如果它只是添加一个{"id":"Data","label:Data","value":"data"}并且在结尾处进行循环添加{{1}到字符串。

所以你的数组格式为

"]" {`表示对象的开头，'}'表示结束

请参考 JSON 了解更多

Answer 2

    $(document).ready(function () {
            AuctoCmplBuyer();
Auctocomplete functionality to each textbox
            $(".auto").autocomplete({ source: AuctoCmpData });
        });

function AuctoCmplBuyer() {
            $.ajax({
                type: "POST",
                url: "../service/TWWebService.asmx/XmlData",
                data: "{strData:'BuyerList'}",
                contentType: "application/json; charset=UTF-8",
                dataType: "xml",
                success: function (msg) {
                    $(msg).find('Table').each(function () {
                        rowObj = new Object();
                        rowObj.col1 = $(this).find('UserDispName').text() + '-' + $(this).find('UserID').text();
                        AuctoCmpData.push(rowObj);
                    });
                }
            });
        }

我正在这样做...我没有按照你说的方式“哈利”

使用Javascript自动完成多个文本框的扩展程序

2 个答案: