jQuery autocomplete with aliases from dictionary-CodePudding

This previous question from 2021 (jQuery UI autocomplete with aliases) was a solution to an old question, but I'm trying to include the aliases within the dictionary instead of using two arrays.The idea is that I can use the alias or the value for lookup and save the ID for the entry. I was trying to reverse engineer the previous array solution but to no success. The below code is the working, basic autocomplete to use the dictionary, lookup the value, and return the key. I can't figure out how to implement the matching part.

var dict = [{key:'1', value:'United States of America', alias:'usa'},
            {key:'2', value:'United Kingdom', alias:'uk'},
            {key:'3', value:'South Africa', alias:'sa'}]

$( "#txtValue" ).autocomplete({
    source: dict,
    select: function( event, ui ) {
    console.log(ui.item.key);
        }
    });

This is the original solution for two arrays:

var tags = ["United States of America", "United Kingdom", "South Africa"];
var alias = ["usa", "uk", "sa"];

$( "#txtValue" ).autocomplete({
    source: function(request, response) {
    var ids = alias.indexOf(request.term);
    var matcher = new RegExp("^"   $.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(tags, function(item, i) {
        if(ids == i) return true;
        return matcher.test(item);
    }));    
    },
    select: function( event, ui ) {
    console.log(ui.item.label);
    }
});

https://jsfiddle.net/r6kLyh12/

CodePudding user response：

Not sure what your trying to do, but do you even need to use a match you can get everything from the selected array item i.e : the key, value and alias not the console log demo

var dict = [{
    key: '1',
    value: 'United States of America',
    alias: 'usa'
  },
  {
    key: '2',
    value: 'United Kingdom',
    alias: 'uk'
  },
  {
    key: '3',
    value: 'South Africa',
    alias: 'sa'
  }
]

$(document).ready(function() {
  $("#txtValue2").autocomplete({
    source: dict,
    select: function(event, ui) {
      console.log('key: '   ui.item.key);
      console.log('value: '   ui.item.value);
      console.log('alias: '   ui.item.alias);
    }
  });
})

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>autocomplete alias</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <style>
      .custom-combobox {
        position: relative;
        display: inline-block;
      }

      .custom-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
      }

      .custom-combobox-input {
        margin: 0;
        padding: 5px 10px;
      }

    </style>
  </head>

  <body><br><br>
    Dictionary: <input type="text"  id="txtValue2">
  </body>

</html>

CodePudding user response：

ah ok fair enough then i believe this should be what your after, it dose the same as your old script but using the dict array instead

Note this assumes the key value will match the corresponding value in the alias array based on the index of an item in that array matching the the key value

  $("#txtValue").autocomplete({
    source: function(request, response) {
      let res = dict.filter(function(value, index) {
        return request.term === value.alias;
      });
      let ids = parseInt(res && res.length && res[0].key || -1) - 1;
      let matcher = new RegExp("^"  
        $.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(tags, function(item, i) {
        if (ids == i) return true;
        return matcher.test(item);
      }));
    },
    select: function(event, ui) {
      console.log(ui.item.label);
    }
  });

I hope this helps