jQuery autocomplete with aliases from dictionary

EricSmith
August 6, 2022
107 views
3 votes
3 Answers

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/s96zeq8b/ updated with Patrick’s code

Answers

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

EDIT: fix for the match using alias

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: 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(dict, function(item, i) {
            //console.log(matcher.test(item.alias))
            if (ids == i) return true;
            return matcher.test(item.alias);
          }));
        },
        select: function(event, ui) {
          console.log(ui.item.key);
        }
      });
});

<!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" class="form" id="txtValue2">
</body>
</html>

- PatrickHume
- August 7, 2022 at 3:03 am
- 0 votes
0
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
Login or Signup to reply.

Hopefully this demonstrates the use of the dict

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

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() {

  $("#txtValue").autocomplete({
    //    source: dict2,
    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);
    }
  });

  $("#txtValue2").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(dict, function(item, i) {
        if (ids == i) return true;
        return matcher.test(item);
      }));
    },
    select: function(event, ui) {
      console.log(ui.item.key);
    }
  });
});

<!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>
   Array: <input type="text" class="form" id="txtValue">
    Dictionary: <input type="text" class="form" id="txtValue2">
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.