Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to create a loop in jQuery function definition?

I am new to jQuery but have had good results so far.
Now I’m trying to define multiple autocomplete statements that will be associated with multiple text input fields.

I have manually created these 2, and they work fine:

$( "#fromLocation_1" ).autocomplete({
     source: strLocations
     });
            
$( "#fromLocation_2" ).autocomplete({
     source: strLocations
     });

However, this is not working:

$for(i=0; i<20; i++)
    {
    $( "#toLocation_"+i ).autocomplete({
    source: strLocations
        });}

So, either I’m taking a completely dumb approach or there’s some basic error in my code.

All help appreciated!

Tags:

4

Answers


  1. 0

    The issue with your loop for the autocomplete functionality seems to be a syntax error. In jQuery, the correct syntax for a for loop does not include a dollar sign ($) before for.

    Here is the corrected version of your loop:

    for(var i = 0; i < 20; i++) {
  $("#toLocation_" + i).autocomplete({
    source: strLocations
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    Login or Signup to reply.
  2. 0

    there seems to be a problem with the syntax, try it.

    for (var i = 0; i < 20; i++) {
  $("#toLocation_" + i).autocomplete({
    source: strLocations
  });
}
    Login or Signup to reply.
  3. 0

    To create a loop in a jQuery function definition for setting up multiple autocomplete fields, you can use a standard JavaScript for loop. Your attempt is almost correct, but there are a couple of syntax errors. Here is how you can correctly define the loop

    for (var i = 0; i < 20; i++) {
  $("#toLocation_" + i).autocomplete({
    source: strLocations
  });
}

    Explanation:

    1. Syntax of the for loop: Ensure the for loop syntax is correct with proper parentheses and braces.
    2. Variable Declaration: Declare the loop counter i using var, let, or const.
    3. Concatenation of String: Use the + operator to concatenate the string "#toLocation_" with the loop counter i.
    Login or Signup to reply.
  4. 0

    a) Since source is the same for both autocomplete, you can merge them into one:

    $( "#fromLocation_1,#fromLocation_2" ).autocomplete({
  source: strLocations
});

    Working snippet:

    let strLocations = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$("#fromLocation_1,#fromLocation_2").autocomplete({
  source: strLocations
});
    input[type=text] {
  width: 40%;
  float: left;
  margin-right: 10px;
}
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>

<input type="text" id="fromLocation_1" placeholder="write something in from location 1">
<input type="text" id="fromLocation_2" placeholder="write something in from location 2">

    b) Better approach: in case of the same source, add the same class to all autocomplete input and do it in one go like this:

    $( ".fromLocation" ).autocomplete({
  source: strLocations
});

    Working snippet:

    let strLocations = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

$(".fromLocation").autocomplete({
  source: strLocations
});
    .fromLocation {
  width: 40%;
  float: left;
  margin-right: 10px;
}
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>

<input type="text" class="fromLocation" id="fromLocation_1" placeholder="write something in from location 1">
<input type="text" class="fromLocation" placeholder="write something in from location 2">

    c) Don’t go for the loop way. It is not recommended at all.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search