Storing other variables with autocomplete as well as the text value

Questions
1

I have an autocomplete and I would like to access an id when the user selects a value from the dropdown list. Is this possible? Here is my code

// Items is an array of objects with properties such as city, county, code etc

self.autocompleteSearchbar = app.autocomplete.create({
  openIn: 'dropdown',
  inputEl: '#searchbar-autocomplete input[type="search"]',
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    for (var i = 0; i < items.length; i++) {
      if (items[i].city.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(items[i].city);
    }
    render(results);
  },
  on: {
    change: function (value, thing) {
      console.log(value);
      self.searchbar.disable();
    },
  }
});

I thought maybe there might be an option to add more data when you call results.push but it seems not, and it might need some complicated adjustments to the render function. How can I do this?

2

I managed to use id of my previous array like this :

var autocompleteDropdownSimple = app.autocomplete.create({
      inputEl: '#autocomplete-dropdown',
      openIn: 'dropdown',
      valueProperty: 'title', 
      textProperty: 'title', 
      source: function (query, render) {
        var results = [];
        if (query.length === 0) {
          render(results);
          return;
        }

        for (var i = 0; i < gameItems.length; i++) {
          if (gameItems[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0){
           
            results.push(gameItems[i]);
          } 
        }

        render(results);
      },
      on: {
        opened: function (value) {                                
            // console.log($$('#games-add-actions'));
        },
        closed: function (ac) {                                
          if (ac.value !== undefined && ac.value[0] !== undefined){
            let cover = ac.value[0].cover;
            if (cover !== undefined) {
              let $cover = $$('<img>').attr('src', cover);
              $$('#autocomplete-image-show').empty().append($cover);
            }

            // buttons
            $$('#games-add-actions').css('visibility', 'visible');
            $$('#games-add-actions').attr('data-gid', ac.value[0].id);
           
            if (ac.value[0].inLudo != 1){
              $$('#games-add-actions .add-to-ludotheque').removeClass("button-fill");
              $$('#games-add-actions .add-to-ludotheque').on('click', function (ev) {
                app.request.post(THEMEREX_ajax_url, postdata, function (data) {
                  $$('#games-add-actions .add-to-ludotheque').prop('disabled');
                  $$('#games-add-actions .add-to-ludotheque').addClass("button-fill");
                });
              });
            } else {
              $$('#games-add-actions .add-to-ludotheque').addClass("button-fill");
              $$('#games-add-actions .add-to-ludotheque').prop('disabled');
              $$('#games-add-actions .add-to-ludotheque').off('click');
            }
            $$('#games-add-actions .sheet-view').on('click', function (ev) {
              app.router.navigate('/gamesheet/' + ac.value[0].id + '/');
            });
            
          } else {
            $$('#games-add-actions').css('visibility', 'hidden');
          }
        }
      }
    });

If it can help you…

3

Thanks for replying @Francois-Xavier_G . Could you please show me what your gameItems structure looks like?

I might have mis-worded my question, I don’t have items in the dom that I’m trying to access id of… I want to be able to store keys and values for the autocomplete items so that I can look up an item when the user selects it.

4

It’s generated with a 9000+ list of objects with several properties (title, cover, id and a boolean) stored into app.data

var gameItems = [];
app.methods.setGameList();

     for(let i=0; i < app.data.games.length; i++){
        gameItems.push({ 
          id: app.data.games[i].jeu_id,
          title: app.data.games[i].name,
          cover: app.data.image_root + app.data.games[i].cover,
          inLudo: parseInt(app.data.games[i].isInLudo, 10)
       });        
     }

You can select what properties are used for rendering / value. (https://framework7.io/docs/autocomplete.html#autocomplete-parameters)

valueProperty: 'title', 
textProperty: 'title',

like that, you can have your full object in ac.value[0]

5

AH! I get it now! All I needed was to add the two arguments :

valueProperty: 'code', 
textProperty: 'city',

And make sure I push the whole object into the search results array inside source. What that does is tell the default render function what to display (textProperty) and that you want to return an object in the event handlers.

Thankyou @Francois-Xavier_G

6

cool, you can mark your topic as solved.

7

I’m struggling to find where you mark your topic as solved in this forum.

8

my answer will be very non-academic : edit the title of the first post and type "[SOLVED] " in the beginning :slight_smile: