Question

标题可能会使这个问题看起来比实际更简单。首先，我对jQuery的知识，熟悉程度和技能水平充其量是不稳定的，所以我只是试图以一种只对菜鸟有意义的愚蠢方式去做某事。

我有一个php生成的页面，它根据外部数据构建了一堆文本字段。这些字段将转换为混合jQuery UI Autocomplete / Combobox字段（类似于组合但允许自由文本）。我试图将.click（函数（...））分配给下拉按钮时遇到困难我认为这与我正在执行jQuery以通过for循环转换所有文本字段这一事实有关并且var i未正确传递到.click函数。

以下是我正在使用的完整测试页面（几乎所有HTML和js数组都将通过php生成）：

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="../includes/jquery-1.5.js"></script>
    <script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script>
        <style>
    .ui-button { margin-left: -1px;width:18px; }
    .ui-button-icon-only .ui-button-text { padding: 0; }
    button.ui-button-icon-only {width:18px;height:21px;}
    .ui-autocomplete-input { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <form method="post" action="results.php">
    <input class="TC_1" type="text" name="TC_1_1" value="E02_04" />
    <script>
          var availableTags = [['test1','test2','test3']];
    </script>
    <br/>
    <input class="TC_1" type="text" name="TC_2_1" />
    <script>
          availableTags.push (['test5','test7','test9']);
    </script>
    <input type="submit" />
    </form>
    <script type='text/javascript'>
  //<![CDATA[
  var input = new Array();
var i = 1;

$('.TC_1').each(function(index) {

input[i] = $("[name=TC_"+i+"_1]").autocomplete({
    source: availableTags[i-1],
    select: function(){alert("selected");},
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");


$("<button type='button'>&nbsp;</button>")
    .attr("tabIndex", -1)
    .attr("title", "Show All Items")
    .insertAfter(input[i])
    .button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-button-icon")
    .click(function() {
    var $input = $(this).before();
    if ($input.autocomplete("widget").is(":visible")) {
        $input.autocomplete( "close" );
        return;
    }
    $(this).blur();
    $input.autocomplete("search", "" );
    $input.focus();
});

    i++;
});
  //]]>
  </script>
</body>
</html>

非常感谢任何帮助。

编辑：抱歉，我忘了添加我收到“错误：输入[i]未定义行：62“

Answer 1

确定。我在新的源代码后更新了我的答案。

试一试。

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="../includes/jquery-1.5.js"></script>
    <script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script>
    <style type="text/css">
    .ui-button { margin-left: -1px;width:18px; }
    .ui-button-icon-only .ui-button-text { padding: 0; }
    button.ui-button-icon-only {width:18px;height:21px;}
    .ui-autocomplete-input { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <form method="post" action="results.php">
      <input class="TC_1" type="text" name="TC_1_1" value="E02_04" />
      <br/>
      <input class="TC_1" type="text" name="TC_2_1" />
      <input type="submit" />
    </form>
    <script type="text/javascript">
      //<![CDATA[
      $('.TC_1').each(function(i) {
        var availableTags = [];
        availableTags.push(['test1','test2','test3']);
        availableTags.push(['test5','test7','test9']);

        $(this).autocomplete({
          source: availableTags[i],
          select: function(){alert("selected");},
          minLength: 0
        }).addClass("ui-widget ui-widget-content ui-corner-left");

        $("<button type='button'>&nbsp;</button>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .insertAfter(this)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("ui-corner-right ui-button-icon")
          .click(function() {
            var $input = $(this).prev();
            $input.autocomplete("destroy");
            $input.val("search").select();
          });
      });
      //]]>
  </script>
</body>
</html>

Answer 2

终于明白了，好吧。我有一种感觉，下面的解决方法可行，但我有点希望有一种更优雅的方式来做到这一点。

    .click(function() {

//Get the name for the target field:
var target = $(this).attr('id');
target = target.substr(3);

    // close if already visible
    if ($("[name=TC_"+target+"]").autocomplete("widget").is(":visible")) {
    $("[name=TC_"+target+"]").autocomplete( "close" );
         return;
    }
    $(this).blur();
    $("[name=TC_"+target+"]").autocomplete("search", "" ); //where the error occurs
    $("[name=TC_"+target+"]").focus();
});

我还给了按钮一个与该字段相对应的唯一名称......

$("<button id='bt_"+i+"_1' type='button'>&nbsp;</button>")

感谢帮助人员。

将变量传递给函数

2 个答案: