Autocomplete from fields above-CodePudding

I have this form:

<form>
<input type="text"  id="name1">
<input type="text"  id="name2">
<input type="text"  id="name3">
...
<input type="text"  id="name100">
<input type="submit" value="Send">
</form>
<script>
$(document).ready(function() {
    var items = [
        "",
    ];
    $(".name").autocomplete({
        source: items
    });
    $('.name').on('keyup', function(e) {
        var txtVal = this.value;
        items.push(txtVal);
    });
});
</script>

What I'm trying to achieve is to have autocomplete with the value from the fields above. I used jquery autocomplete. The variable that stores the autocomplete options is called "items" and on keyup I pushed that value on the array. The result is a mess and somwhere I must've screw it. Here is a working end user scenario:
Step 1: Let's say in the field #name1 I type Jon Doe
Step 2: When I go to #name2, I would like that after I type J to see an autocomplete option Jon Doe (the value from the above field).
Step 3: Let's say I didn't choose Jon Doe as autocomplete for #name2 so I typed Joanna Doe.
When I go to #name3, I should see Jon Doe and Joanna Doe as autocomplete options.

CodePudding user response：

This might be what you are looking for:

$(document).ready(function() {
  $('.name').on('keyup', function(e) {
    var n = $('.name').map(function() {
      if ($(this).val().length > 0) {
        return $(this).val();
      }
    }).get();

      $(".name").autocomplete({
        source: n
      });
  });
});

Demo

$(document).ready(function() {
  var activeInput = null;
  $('.name').on('keyup', function(e) {
    activeInput = $(this);
    var n = $('.name').map(function() {
      if ($(this).val().length > 0) {
        return $(this).val();
      }
    }).get();

    $(".name").not(activeInput).autocomplete({
      source: n
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<form>
  <input type="text"  id="name1">
  <input type="text"  id="name2">
  <input type="text"  id="name3"> ...
  <input type="text"  id="name100">
  <input type="submit" value="Send">
</form>

If you wish, you can "exclude" the input from auto updating itself when typing:

$(document).ready(function() {
  var activeInput = null;
  $('.name').on('keyup', function(e) {
    activeInput = $(this);
    var n = $('.name').map(function() {
      if ($(this).val().length > 0) {
        return $(this).val();
      }
    }).get();

    $(".name").not(activeInput).autocomplete({
      source: n
    });
  });
});

CodePudding user response：

It looks like it was a bit simpler than I thought.

<script>
$(document).ready(function(){
    var name = [];    
    $('.name').on('keyup',function(e){
        name = $('.field-first_name').map(function(){return $(this).val();}).get();
        $(this).autocomplete({
            source: name
        });
    });
});
</script>