循环jQuery自动完成(第二个字段) [英] loop jquery autocomplete (second field)

问题描述

以下问题 jquery自动完成，在相同字段中包含更多项 我试图将自动完成功能循环15次.

Following this question jquery autocomplete with more items in the same fields I was trying to loop the autocomplete function 15 times.

 $(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循环可能在错误的地方...?谢谢！

It autocompletes the #town21, #town22, #town23.... fields, but it doesn't autocomplete the #country21, #country22 .... fields. My for loop is probably in the wrong place...? Thanks!

推荐答案

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

Your code cannot work because you met a typical closure problem.

执行代码时，循环:

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

已经完成，第一次运行任何自动完成功能.这意味着您所有的自动完成功能都将值15包含为变量i，这就是您的问题.您可以通过验证代码来验证此权限.

has been completed before any of the autocomplete functions will run for the first time. This means that all your autocomplete functions will contain as variable i the value 15, and this is your problem. You may verify this right debugging your code.

经典的闭包示例是:

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

如何避免这种情况?一种可能的解决方案是使用IIFE. 来自MDN:IIFE(立即调用的函数表达式):是一个JavaScript函数，它在定义后立即运行.

How to avoid this? One of the possible solutions consist of using the IIFE. From MDN: IIFE (immediately invoked function expressions): is a JavaScript function that runs as soon as it is defined.

因此，在您的情况下，您可以更改一些代码，以便(我只重写了您感兴趣的部分):

So in your case you can change a bit your code so that (I rewrote only the part of your interest):

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自动完成(第二个字段)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！