We Keep Coding

"value" vs. "label" in jQuery UI Autocomplete

This question comes from Binds links to the returned results for jQuery Autocomplete UI, which uses both value and label for autocompletion with jQuery.
In fact, just value could do the job.
var availableTags = [{
value: "Merriam-Webster",
url: "http://www.learnersdictionary.com/"
},
{
value: "Cambridge Dictionary",
url: "https://dictionary.cambridge.org/us/"
}
];
Working Demo
When should I use which?
I tried go through the source code of autocomplete.js but didn't figure it out.

The label is what is displayed to the user and the value is what the input field's value is set to when that element is chosen.
According to the API documentation:
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

How to change the event of postcode in customer checkout address form?

I am developing a custom shipping module for magento 2.2.
When you're filling out the Shipping Address form in Magento 2, periodically Magento will make an ajax request for the URL
http://magento.example.com/rest/default/V1/guest-carts/[hash]/estimate-shipping-methods
I changed the postcode text field to an autocomplete text field. Now when I type something on the text field it makes an ajax request to the above-mentioned URL. But after entering two or three characters, it shows auto suggest fields (which I added in autocomplte) and if I select one from that it doesn't generate any AJAX calls.
I added autocomplete code in my custom JS below:
setTimeout(function(){
jQuery("input[name='postcode']").autoSuggest(data.items,
{
selectedItemProp: "name",
searchObjProps: "name",
selectionLimit: 1,
minChars: 3,
selectionAdded: function(elem)
{
result = elem.text();
getresultval(result);
}
}
);
}, 6000);
So, my problem is when I write on the text box it works, but when I select something from the auto suggestion it doesn't work. That means the issue is with binding the event of postcode text field.
How to resolve this?

JQuery Autofill - Make Mandatory Selection

I used JQuery Autocomplete component to show the values from database. In this, the user can select the item by typing some text. In case, if the user not select any of the options shown below, the field is filled with value which user typed. But I want make that field such way that user can only select the value listed in Autocomplete. It should not contain any typed text. Is there any possible way to do it?

Yes possible.
1) Using change event you can clear the textbox values if no options are selected.
$("#tags").autocomplete({
source: availableTags,
change: function (event, ui) {
if (!ui.item) {
$(this).val("");
// Handle the error
}
}
});
JSFiddle
2) Not sure, have you been aware of [autocomplete-combo], this suits for your issue.(http://jqueryui.com/autocomplete/#combobox)

Why dont you try out Selectize
on that site Search for "Max Items" this will fulfill your requirment
It allow you to only select from whatever in the list

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).

You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});

On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.

Jquery Autocomplete: How to fill out input on page load

I set up a jquery autocomplete that queries an endpoint to get the choices in the input (once you start typing):
$("#brand-select").autocomplete({
source: function(request, response) {
$.getJSON(
'/networks?search='+request.term ,
function(data) {
data = JSON.parse(data);
response(data);
}
);
},
minLength: 1,
multiselect: true
});
Is there a way I can fill out the autocomplete so that there is text in the input right away (on page load)?
For example, after the autocomplete is set up, I want the input to automatically display 'ABC'
I know this isn't right but I've tried:
$("#brand-select").autocomplete(["ABC"]);

Presumably brand-select is an input box? Therefore you can inject the value directly (if you're using script to build your HTML) so you end up with something like <input type="text" id="brand-select" value="ABC"/>.
Or you can just use standard jQuery to populate it, e.g. $("#brand-select").val("ABC");.
The autocomplete relates to the dropdown and searching, but the input box underneath is unchanged, so you can treat it like any other input.
P.S. If you then want it to automatically perform a search based on that text, then call the autocomplete's "search()" method (see https://api.jqueryui.com/autocomplete/#method-search), e.g. $("#brand-select").autocomplete("search");