Passing javascript value to html input tag

Question

I want to pass value from jquery to my html code.

function setMembers(members){
var members = members;
$('.member-search').autocomplete({
source: function (request, response) {
  var regex = new RegExp(RegExp.escape(request.term), "i");
  var recs = $.grep(members, function (obj) { 
    return ((regex.test(obj.first +" "+ obj.last)))
  })
  response($.map(recs, function (item) {
    return {
      label: item.first + " " + item.last,
      value: item.first + " " + item.last,
      id: item.id
    }
  }));
},
}

Here in return I passed item.first and item.last as value and item.id as id. I want to pass this id value to my html input tag value. This is my html.

I can pass item.last and item.first but not item.id. Is there any way to do that. If I use item.id as value of return statement I can pass it to input tag value, But my auto complete out put is wrong. It shows user ID as below.

user_1889685 · Answer

You're having some issues with your code. First you don't have to utilize every jQuery function; nowadays browsers do have and support filter instead of grep and arrays do have a map method by default. Also, since you have simple text, there is no need to escape the regular expression and thus you can avoid a polyfill for the RegExp.escape function. The jquery.grep like filter method, expects a boolean return value, not a string like you returning. jQuery UI autocomplete source option function response can return an array of strings ([ "Choice1", "Choice2" ]) or an array of objects with label and value properties ([ { label: "Choice1", value: "value1" }, ... ]).

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

To refactor your code, I'll use vanilla JS filter and map.

Please run below snippet to check it working:

function setMembers(members) {
  $('#member-search').autocomplete({
    source: function (request, response) {

      let regex = new RegExp(request.term, 'i');
      
      let recs = members
        // Filter members using request term
        .filter(({ first, last, id }) => {
          let term = `${first} ${last}`;
          return regex.test(term);
        })
        // Map to the response supported object
        .map(({ first, last, id }) => ({
          label: `${first} ${last}`,
          value: id
        }));

      console.log('recs', recs);

      response(recs);
    },
    select: function (event, ui) {
      event.preventDefault();
      $("#member-search").val(ui.item.label); 
      $("#selection").text(`"${ui.item.label}" (ID: ${ui.item.value})`);
    }
  });
}

setMembers([{
    first: 'Giorgos', last: 'Mihas', id: 1
  }, {
    first: 'Mike', last: 'Nakas', id: 2
  }, {
    first: 'Angela', last: 'Fox', id: 3
  }, {
    first: 'Maria', last: 'Pappou', id: 4
  }, {
    first: 'Vaggelis', last: 'Maggas', id: 5
  }, {
    first: 'Nikos', last: 'Stergiou', id: 6
  }, {
    first: 'Elvis', last: 'Presley', id: 7
  }
]);

h3 { font-family: monospace; }






  Members: 
  
  Selection:

Passing javascript value to html input tag

1 Answers