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");
Related
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.
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?
I have my code here - http://jsbin.com/civimivihe/edit?html,output
What it does is, when a user keys in some text in the input box a list of suggestions appear using jQuery's auto-complete.
However when a user selects a value from the suggestions, I want only the first word to appear in the textbox.
I am stuck with modifying the select event. Any suggestions on how to parse the first word alone?
Try changing the end of the jQueryUI's autocomplete Ajax JS code from this...
select: function( event, ui ) {
return ui.item.label;
}
To this... Then it will leave the stock ticker's code in the input field.
select: function( event, ui ) {
var labelPieces = ui.item.label.split(' ');
setTimeout(function() {
$('#stock').val(labelPieces[0]);
},0);
}
The jQuery Autocomplete API documentation can be found at: http://api.jqueryui.com/autocomplete/
Note: The setTimeout 0 value allows the jQueryUI library to finish up its processing work for its autocomplete feature, before the value is parsed and inserted into the input field. The 0 value creates an asynchronous timer. It can be adjusted upward as needed. (Remember to use milliseconds, instead of seconds.)
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
I have an input box for searching employee info (attached to a jquery autocomplete), and a box for employee number. The employee info queries multiple values (Lastname Firstname, Title, Clocknum) and returns them all as a string via the autocomplete. This is only if they dont know the clock number. The additional box is so they can search via clocknum as well.
Is there a way, to fire a method which populates a data control after clicking on or tabbing on the selected jquery autocomplete value?
using the select property of your autocomplete box:
updated after ekoz's comment
$('#lastName').autocomplete
({
source : "FormAutoComplete.ashx",
minChars : 3,
width : 325,
mustMatch: true,
select : function()
{
//jquery allows you to save several code lines
$('#txtClock').value(ui.item.value.substr(ui.item.value.length-5));
}
});
a complete read of jquery autocomplete's documentation should makes clear the code above http://jqueryui.com/demos/autocomplete/