Text_Field_With_Auto_Complete Inside Form_For

Javascript autocomplete with different input field value

Consider the following example.

$(function() {
  $("#user_name").autocomplete({
    source: [{
      label: "John Doe",
      value: 1001
    }, {
      label: "Jonny Appleseed",
      value: 1002
    },{
      label: "Jane Doe",
      value: 1003
    }],
    select: function(e, ui) {
      $("#user_name").val(ui.item.label);
      $("#user_id").val(ui.item.value);
      return false;
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div>Name: <input id="user_name" /></div>
<div>ID: <input type="text" id="user_id" /></div>

How to autocomplete the user's first name in an HTML input box?

There is an attribute called autocomplete in HTML forms. For the first name you could use autocomplete="given-name and last name would be autocomplete="family-name".

There is more information at MDN Web Docs

How to add auto complete to a text form field?

I used flutter_typeahead plugin and it gives all the options as in a text form field including autofocus.

Auto complete input field mandatory in form

Try this working demo :

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {    $scope.create = function() {      console.log("submitting..");    }});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="myApp" ng-controller="MyCtrl">    <form name="addressform" ng-submit="addressform.$valid && create()" novalidate>        <span ng-show="submitted == true && addressform.address.$error.required">Required field.</span>        <div class="form-group">            <input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/>        </div>    <div class="form-group">       <input type="submit" value="create" class="btn btn-primary btn-block" ng-click="submitted = true">    </div> </form></div>

Autocompletion in a nested form text field

You cross-posted this in cocoon issues, so I will replicate my answer to you here.

Your selection filter for jquery seems wrong. You write on("focus","programline_exercise_name" and $('programline_exercise_name') which would go looking for a html-element with that name. Like $('p') will select all paragraphs. I am assuming you want to select an element with id or class programline_exercise_name ? For dynamically added fields you would definitely be using a class, but then your jquery snippet would also be wrong.

So if you add the wanted class-name to the field

<%= f.text_field :exercise_name, data: { autocomplete_source: Exercise.order(:exe_desc).map(&:exe_desc)},
      class: "form-control programline_exercise_name", 
      placeholder: "Exercise", 
      autofocus: true %>

You would then need something like

$(document).on("focus", ".programline_exercise_name", function() {
  var _this = $(this); 
  _this.autocomplete({
    source: _this.data('autocomplete- source')
  }); 
});

Not tested, so let me explain: when the focus event is triggered on any of the text-fields with class .programline_exercise_name, only set the autocomplete for the element that caused the event.

Jquery autocomplete - add value in multiple input fields

do that:

to access of the input number linked to the input text, you have to go up to the div which is the parent of both. (sorry for my english)

$(this) => input changed

.closest("div.row") => find the first parent with div.row

.find("input[type=number]") => find the input number linked to the text

   $('.item-name').autocomplete({
    lookup:sourceData,
    onSelect: function (suggestion) {
       var number = Math.floor(Math.random()*100);

        $(this).closest("div.row").find("input[type=number]").val(number); 
        }
    });

var sourceData = [
  "Peter",
  "John",
  "Adam",
  "Zack",
  "George",
  "Richard",
  "Brian",
  "Frank",
  "Lars",
  "Quentin",
  "Will"
];

$('.item-name').autocomplete({
  lookup: sourceData,
  onSelect: function(suggestion) {
    var number = Math.floor(Math.random() * 100);

    $(this).closest("div.row").find("input[type=number]").val(number);
  }
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<div id="meal-container">
  <div class="col-12" id="meal-div">
    <div class="form-group">
      <div class="row">
        <div class="col-7">
          <input type="text" placeholder="Add name" class="form-control item-name" name="item-name[]" />
        </div>
        <div class="col-5">
          <input type="number" class="form-control item-id" name="id[]" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-12" id="meal-div">
    <div class="form-group">
      <div class="row">
        <div class="col-7">
          <input type="text" placeholder="Add name" class="form-control item-name" name="item-name[]" />
        </div>
        <div class="col-5">
          <input type="number" class="form-control item-id" name="id[]" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-12" id="meal-div">
    <div class="form-group">
      <div class="row">
        <div class="col-7">
          <input type="text" placeholder="Add name" class="form-control item-name" name="item-name[]" />
        </div>
        <div class="col-5">
          <input type="number" class="form-control item-id" name="id[]" />
        </div>
      </div>
    </div>
  </div>
</div>

var itemsArrray = [
  {
    value: "Item 1",
    label: "Item 1",
    company: "Company 1",
    company_id: "cmp1"
  },
  {
    value: "Item 2",
    label: "Item 2",
    company: "Company 2",
    company_id: "cmp2"
  },
  {
    value: "Item 3",
    label: "Item 3",
    company: "Company 3",
    company_id: "cmp3"
  }
];

$(".inputitem").autocomplete({
      //source: 'search.php',
      source: itemsArrray,
      minLength: 1,
      select: function(event, ui) {
        //Here $(this) points to the current autocomplete input element
        $(this).closest('tr').find('input.company_name').val(ui.item.company);
        $(this).closest('tr').find('input.company_id').val(ui.item.company_id);
      }
    });