Question

关注这个问题 jquery autocomplete with more items in the same fields 我试图循环自动完成功能15次。

 $(function() {
   for (i = 0; i < 15; i++) {   
      function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 1 );
      }

      $( "#town2"+i ).autocomplete({
         source: "<?php echo $absolute_site . "autocomplete/autocompletetown.php" ?>",
         select: function( event, ui ) {
            var item = ui.item; 
            if(item) {
               $("#country2"+i).val(item.country); 
               $(this).val(item.value +' is in ' + item.state);   
               return false;                   
            }    
         }
      })
     .autocomplete( "instance" )._renderItem = function( ul, item ) {
        return $( "<li>" )
          .append( "<a>" +item.value + "," +item.state + "," + item.country + "</a>" )
          .appendTo( ul ); 
     };
  }
});

它会自动填充＃town21，＃town22，＃town23 ....字段，但它不会自动填写＃country21，＃country22 ....字段。我的for循环可能在错误的地方......？谢谢！

Answer 1

您的代码无法正常工作，因为您遇到了典型的闭包问题。

执行代码时，循环：

for (i = 0; i < 15; i++) {

在任何自动完成功能首次运行之前，

已完成。这意味着您的所有自动完成功能将包含值为15的变量i，这就是您的问题。您可以验证这是正确的调试代码。

关闭的典型例子是：

for (var i = 1; i <= 5; i++) {
  setTimeout(function() { console.log(i); }, 1000*i);     // result: 6 6 6 6 6
}

如何避免这种情况？其中一种可能的解决方案是使用IIFE。来自MDN：IIFE（立即调用函数表达式）：是一个JavaScript函数，它在定义后立即运行。

所以在你的情况下，你可以改变你的代码，以便（我只重写你感兴趣的部分）：

var townTags = [
  {label: 'Miami',  value: 'Miami',  state: 'Florida', country: 'Florida'},
  {label: 'Rome',   value: 'Rome',   state: 'Italy',   country: 'Italy'},
  {label: 'Paris',  value: 'Paris',  state: 'France',  country: 'France'},
  {label: 'Berlin', value: 'Berlin', state: 'Germany',  country: 'Germany'}
];
$(function () {
  for (i = 0; i < 15; i++) {
    (function(i) {  // start IIFE
      $('#town2' + i).autocomplete({
        source: townTags,
        select: function (event, ui) {
          var item = ui.item;
          if (item) {
            $("#country2" + i).val(item.country);
            $(this).val(item.value + ' is in ' + item.state);
            return false;
          }
        }
      });
    })(i);  // end IIFE
  }
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<div class="ui-widget">
    <label for="town20">Town: </label>
    <input id="town20">
    <label for="country20">Country: </label>
    <input id="country20"><br>
    <label for="town21">Town: </label>
    <input id="town21">
    <label for="country21">Country: </label>
    <input id="country21"><br>
    <label for="town22">Town: </label>
    <input id="town22">
    <label for="country22">Country: </label>
    <input id="country22"><br>
    <label for="town23">Town: </label>
    <input id="town23">
    <label for="country23">Country: </label>
    <input id="country23"><br>
    <label for="town24">Town: </label>
    <input id="town24">
    <label for="country24">Country: </label>
    <input id="country24"><br>
    <label for="town25">Town: </label>
    <input id="town25">
    <label for="country25">Country: </label>
    <input id="country25"><br>
</div>

循环jquery自动完成（第二个字段）

1 个答案: