Autocomplete text/value

I’m trying to setup the autocomplete with ID as textProperty and NAME as valueProperty, and getting most working. After it is selected a choice; however, what shows in the text field is the ID, instead of NAME. Most examples is NAME as textProperty and valueProperty. I couldn’t find others having the same issue. I probably did something wrong. I’m struggle with this for quite sometimes. Any suggests would be really appreciated.

For example, AJAX returns data = [{ID:“1”,NAME:“White Car”},{ID:“2”,NAME:“Black Car”},{ID:“3”,NAME:“Green Car”}]
After I select “Black Car” I’m expecting it shows “Black Car” in the text field, not “1”.

Thanks.

app.autocomplete.create({
  inputEl: '#product-autocomplete', //link that opens autocomplete
  openIn: 'dropdown', //open in page
  valueProperty: 'ID', //object's "value" property name
  textProperty: 'NAME', //object's "text" property name
  source: function (query, render) {
    var autocomplete = this;
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    app.request({
      url: host + 'getProductByKeywords',
      method: 'GET',
      dataType: 'json',
      data: {
	keywords: query
      },
      success: function (data) {
        // ex. data = [{ID:"1",NAME:"White Car"},{ID:"2",NAME:"Black Car"},{ID:"3",NAME:"Green Car"}]
	render(data);
      }
    });
  },
});

Then you just have to set valueProperty to NAME as well. This will be set as input’s value

Thanks, nolimits4web. Yes, it would display the NAME, but the form is submitted it would not submit the ID. I’m comparing its behavior like that of the real drop-down, which NAME is shown on screen and ID is sent when submitted. I thought this would be a common desired behavior. Thanks.

Input can send only what in its value, it is impossible that input can send something different from its value. Then you have 2 options:

  • use standalone autocomplete where you can control how to display value
  • modify form data before submitting based on its NAME