[SOLVED] How can I set the value property in autocomplete element?

Questions
1

Hi, I’m using an autocomplete element inside a form. I’m uploading the option element from the server throught an a get request. The array returned from the server has the following json format:

  {"name": "Los Angeles", "id": "34" }

Before to load the autocomplete I do the request in this way

  const getMunicipality =() =>{

  app.request.get('http://X.X.X/',
              {data: myData},
              function (data) {

                  var d = JSON.parse(data);
                  for (var i = 0; i < d.length; i++) {
                    
                        municipality.push({"name": d[i].name, "id": d[i].id}); 

                  }
              }

);
}

Then I load the Autocomplete in this way.

     const loadMunicipality =() =>{

       var loadSelect = app.autocomplete.create({
       inputEl: '#autocomplete-m',
      openIn: 'dropdown',
      preloader: true, //enable preloader
      valueProperty: 'id', //object's "value" property name
      textProperty: 'id', //object's "text" property name
      typeahead: true,
     dropdownPlaceholderText: 'Type...',
    source: function (query, render) {
       var autocomplete = this;
      var results = [];
      if (query.length === 0) {
         render(results);
        return;
     }
   // Show Preloader
   autocomplete.preloaderShow();


 // Find matched items
    for (var i = 0; i < municipality.length; i++) { 
      if (municipality[i].name && municipality[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(municipality[i].name);
    }
    // Hide Preoloader
    autocomplete.preloaderHide();
    // Render items by passing array with result items
    render(results);

 }
 });

the html element

  <li class="item-content item-input">
		 <div class="item-inner">
			 <div class="item-title item-label">Municipality</div>
					<div class="item-input-wrap">
			                 <input id="autocomplete-m" type="text" placeholder="" name="id_m">
				     </div>
			 </div>
		</li>

My problem is that: when the user select an option, i set correctly the text, but not the value. I’d like as value the id of the element selected. For example: the user selected Los Angeles, but the value to retrieve with the method app.form.convertToData() is “34” not Los Angeles. The code posted, when iI retrieve the value i find Los Angeles.

2

Hi,
you are passing an array of results strings, not an array of object

for (var i = 0; i < municipality.length; i++) { 
  ...
  results.push(municipality[i].name); // change it to results.push(municipality);
  ...
}

after that f7 will notice its an object, and the returned value will be the object not a string.

jsfiddle

3

Hi, thank you :slight_smile: it works partially. It shows correctly the name Los Angeles, but after click on Los Angeles as an option it changed with his id => 34. I’d like to have the id only on the backend when i go to retrieve the data input.

4

just set both props to name:

...
      valueProperty: 'name', //object's "value" property name
      textProperty: 'name', //object's "text" property name
...

and then you listen to change, there is your selected object

    autocomplete.on('change', function(value) {
      console.log(value);
    })
5

Correct me if I wrong, i write your line here.

    ......
   // Find matched items
   for (var i = 0; i < municipality.length; i++) { 
        if (municipality[i].name && 
        municipality[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) 
        results.push(municipality[i]);
  }
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);

 }

 loadSelect.on('change', function(value) {
  console.log(value);
})
});
6

that is your autocomplete? if it is, yes, attach the event listener to that var. if not, you have to listen to the autocomplete event, or just add as a param;
eg:

    var autocomplete = app.autocomplete.create({
      inputEl: '#autocomplete-dropdown',
      openIn: 'dropdown',
      valueProperty: 'name',
      textProperty: 'name',
      source: function(query, render) {
        var results = [];
        if (query.length === 0) {
          render(results);
          return;
        }
        // Find matched items
        for (var i = 0; i < users.length; i++) {
          if (users[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(users[i]);
        }
        // Render items by passing array with result items
        render(results);
      }
    });


    autocomplete.on('change', function(value) {
      // here you have your selected object
      console.log(value);
    })

or

    var autocomplete = app.autocomplete.create({
      inputEl: '#autocomplete-dropdown',
      openIn: 'dropdown',
      valueProperty: 'name',
      textProperty: 'name',
      source: function(query, render) {
        var results = [];
        if (query.length === 0) {
          render(results);
          return;
        }
        // Find matched items
        for (var i = 0; i < users.length; i++) {
          if (users[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(users[i]);
        }
        // Render items by passing array with result items
        render(results);
      },
      on: {
       change: function (value) { console.log(value); } // here you have your selected object
     }
    });
1 Like
7

Yes, you need to create other hidden input where you will set ID value of the selected autcomplete item within its change handler like @pvtallulah shown

8

But how can I retrieve the page and set the value? I tried in this way, but the get() method return a null object. Thank you for your help.

 on: {
   change: function (value) { 
       var currentPage= self.app.views.get('#municipality-add'); //data name of the page
   console.log(currentPage);
    var idM= currentPage.getElementById("id_m"); //id autocomplete

    idM.value = value[0].id; }
 }
9

This is useless and wrong:

If it has ID then just:

on: {
   change: function (value) { 
      var idM= document.getElementById("id_m").value = value[0].id;
   }
1 Like
10

It works! thank you @pvtallulah @nolimits4web :smiley: