How can I limit users to only pick from options listed in EasyAutoComplete (jquery)?

Question

I'm using EasyAutoComplete (http://easyautocomplete.com/), which while it does utilize jquery, is different from the standard jquery ui autocomplete. I'm trying to make it so that users can only select an item that is from the list that gets generated. I found the answer I wanted for the standard jquery ui autocomplete here: jQuery UI autocomplete: enforce selection from list without modifications

The issue is that I'm not quite sure how I can take that code and implement it along with EasyAutoComplete. Specifically, I would like to use this bit:

    change: function (event, ui) {
        if (ui.item == null || ui.item == undefined) {
            $("#artist").val("");
            $("#artist").attr("disabled", false);
        } else {
            $("#artist").attr("disabled", true);
        }
    }

While the documentation for EasyAutoComplete does provide several event handlers, none of them are for the event that I want. I'm guessing I would need to somehow work this into the jquery.easy-autocomplete.min.js code itself, but I am at a loss at where to even start with that!

What is the best way to approach this?

Kinglish · Answer 1 · 2021-05-04T22:09:25.480

1

I tried a handful of events from their API and think your best bet is to just capture the textfield value on blur, then compare it to the available data

<script>
$(document).ready(() => {
  var options = {
  data: ["blue", "green", "pink", "red", "yellow"]
  }
    
$("#basics").easyAutocomplete(options);
$("#basics").blur(function() {
  let myval = $(this).val().trim().toLowerCase();
  let comparedata = options.data.map( (item) => {return item.toLowerCase()});
  if (comparedata.indexOf(myval) == -1) {
    $(this).val('');
  }
})
});
</script>

 <input id="basics" />

edited May 04 '21 at 22:09

answered May 04 '21 at 21:48

Kinglish

23,358
3
22
43

Thank you for your help! I actually ended up just using the change() function outside of options itself. – nightmare637 May 06 '21 at 14:11

score 1 · Accepted Answer · answered May 06 '21 at 14:10

1

It took a bit of research, but I actually was able to come up with a solution. Rather than using change() inside the options for autocomplete, you can use it outside. Plus, the API has a getSelectedItemData() function you can use to pull the item data.

$("#artist").change(function () {
    let selectedvalue = $("#artist").getSelectedItemData();
    let specval = selectedvalue[0];
    
    if (specval == "undefined" || specval == null) {
        $("artist").val("");
    }
});

It's worth noting, while EasyAutoComplete does have events for OnClick and OnKeyEnter, there isn't a nice and easy catch-all available. You would have to program out these events separately, which is not DRY coding. Plus they don't have an event for when the user clicks off the screen, outside of the select box.

answered May 06 '21 at 14:10

nightmare637

635
5
19

I'm currently working on a project that needs the same thing. However, when I try your solution it clears the selected value from the field (after item is selected). Any advice? – TNF Jun 18 '21 at 10:01
1

My guess is that your selected value is either returning null or undefined. Have you tried using console.log() or even an alert() to see what the value is every time the user selects an option? It's possible that it might not be returning the value you think it is. I need to implement this function in another section of my code on Tuesday, so if you're still not able to resolve it by then, post or message me your code and I can take a look at that time. – nightmare637 Jun 18 '21 at 18:02
You were absolutely correct about this. The returned value was incorrect, so I had to set up the function 'onSelectItemEvent', due to the JSON feed only contains custom labels. Your script works perfectly fine. Thanks a lot for your help! – TNF Jun 18 '21 at 18:55

How can I limit users to only pick from options listed in EasyAutoComplete (jquery)?

2 Answers2