I'm trying to find some Bootstrap Autocomplete plugin, to make autocomplete by cities.
For exemple I have such arrow:
{
['Alabama','USA'],
['Alaska','USA'],
['London','UK'],
['Kiev','Ukraine'],
}
and make searching by first letters of city string(country don't take).
The most nice plugin that I've found: https://twitter.github.io/typeahead.js/examples/
But in it searching goes by all entered symbols.
So:
i'm looking for autocomplete by name of city by first symbols, and shows with country;
if I wrote "Al", select box must show:
Alabama, USA
Alaska, USA
with highlited "Al".
Maybe will be good idea change arrow to strings like:
['Alabama, USA', 'Alaska, USA', 'London, UK','Kiev, Ukraine']
?
I think what you are looking for is select2 : https://select2.github.io/
You can check out the example here : https://select2.github.io/examples.html
You may also want to arrange your array to something like this:
{
['Alabama, USA'],
['Alaska, USA'],
['London, UK']
}
I have been using MagicSuggest pluggin since years. Very easy to manage, it will provides you auto suggestion and auto select too.Plenty of options are available.
Please have a look at MagicSuggest demo.
For documentation see here
Have a look on sample codes
To download please go to GitHub
As per my understanding it might help you. If you found any difficulties feel free to ask.
Thanks
Related
In google's search box, as user types a partial term, a list of terms partially matching the term pop up and user might choose one from them. This turns out to be convenient. Please see the attachment:
Is this done through browser's cache? I guess so, because I observed this on my local machine with my own experimental application. Please see attachment below:
As I type letter 'a', three words pop up, but my application is super simple, with only a h:form in JSF in front, with much backend to support this in particular. So, I think the three words must be suggested by browser's cache, since I typed them before. Can someone confirm this?
Now, if I want to something similar to the suggestion, but different. The suggested terms are not suggested through Browser's cache, but through a back bean to provide this.
<h:form id="wordForm">
<h:inputText id="word" value="#{wordController.word}" />
<h:commandButton id="search" value="search!"
action="#{wordController.search}" />
</h:form>
For example, if I have a backend bean to hold a map:
#ApplicationScoped
class WordSuggestion {
...
private Map<String, String> wordSuggestions;
public void initialize() {
wordSuggestions.put("book", "books");
wordSuggestions.put("book", "booking");
wordSuggestions.put("book", "booked");
}
}
After the user types the full word "book", I want to 3 candidates "books", "booking" and "booked" to be suggested, in a similar fashion as the above suggestion. One difference is that, for the browser cache suggestion (if it is), as soon as the user types one character, suggestions start; however, in my case, I would want the user to type the full word, i.e. "book", then start the suggestion. Eventually, I also want as soon as the user starts to type, the suggestion starts, but I feel this might be the first type.
How to achieve this in my search box? I am using JEE, JSF, JavaScript, html.
Follow this:
<input type='text' title='Tags' id='tags' />
$(document).ready(function() {
var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
$( "#tags" ).autocomplete({
source: aTags
});
});
Use a JQuery autocomplete plugin like EasyAutocomplete
How to disable kendo-ui grid multi column filtering?
I need to clear other column filter value when filtering with a column, and filtering only possible with single column(Not combination filter)?
demo: https://so.lucafilosofi.com/disable-kendo-ui-grid-multi-column-filtering
try this:
var datasource = $("#grid").kendoGrid({
columns: [{}],
filterable : true,
filterMenuInit: function(e) {
$("form.k-filter-menu button[type='reset']").trigger("click");
},
dataSource: {
data: [{}]
}
});
NOTE: after some research i noticed that this is a common issue in the kendo community as well as is one of the most wanted feature to bind the filter menu event, but still there is no valid fix. so, i decided to hack the source code a little bit (just few lines of code), this task has been quite annoying since the kendo source is only available in compressed/obfuscated format for non licensed copy, BTW, you can see the result on the demo page and look into the source code. source on github for direct cdn file inclusion hope this help someone...
The requirement is to display autocomplete addresses based on the region selected. The Jquery autocomplete is called everytime the region changes. I am getting the correct autocomplete addresses based on the region. But along with the new address list, I also get the address list for previously selected regions.
To solve this problem, I used - $("#address).removeData('events').autocomplete(...)
This solves the problem. But a new problem is introduced now! The scrolling in the autocomplete list does not work properly, items are skipped on pressing down arrow key/up arrow key.
Here is the code snippet:
$("#address).removeData('events').autocomplete({
serviceUrl : 'mysource',
minChars : 2,
params : {
region : selectedRegion
},
noCache : true,
width : 350,
maxHeight : 170,
onSelect : function (value) {
...
...
}
});
Can somebody suggest me the correct approach? I am using jquey.autocomplete-min.js
If youre getting an additional appearing alongside jquery's autocomplete list, it may be an issue with your browser trying to autocomplete the input.
trying adding the autocomplete="off" attribute to the input field you're autocompleting
As mentioned in this answer the issue might not be with your code snippet but with browser http caching in general.
Well, the following worked like a charm to me
var ac = $("#address").autocomplete();
The next time, the region is changed, instead of calling autocomplete()
again, I just do this -
ac.setOptions({ params:{ region : selectedRegion}});
This updates the existing call with new region. I will no more see autocomplete suggestions for the previous selections.
I'm trying to find a resource in order to auto populate the location based on postcode provided.
e.g. When user types in 4 digits of post code, the auto complete kicks up and shows all the matched locations in format below. Postcode, Suburb, State e.g. 1234,abcSuburb,abcState.
I definately looks at jquery autocomplete at http://jqueryui.com/autocomplete/. However it appears that list only contains exact searched items. My requirement is is to get additional item_details based on item searched.
Any help will be appreciated.
You should check out Twitter's Typeahead.js.
They recently open sourced this and it's battle tested on twitter.com
I've created a KO Combo, it coudl support this.
Live example
http://jsfiddle.net/JD49k/6/
Repo
https://github.com/AndersMalmgren/Knockout.Combobox
Use Ko.bindingHandlers for create custom function like
so easy to implement and use
<input id="ainput" class="form-control" data-bind="jqAuto: actualValue, jqAutoOnChange: autoChange, jqAutoQuery: autoQuery, jqAutoSourceLabel: 'Description', jqAutoSourceInputValue: 'Name', jqAutoSourceValue: 'Id'" />
here Fiddle check out for working demo.
I'm presently using jQuery inputmask for the following effect:
It's fairly simple for US & Canada phone number formatting using something like:
$("#user_phone").inputmask("mask", { "mask": "(999) 999-9999" });
I would, however, like to change this formatting context based on the "Country code" dropdown such that when it is United Kingdom, it uses another mask, etc. How would I implement this such that the mask will change context based on dropdown in js/jQuery?
Here's an example of the working source as it is now: http://jsfiddle.net/j9aNh/1/
UPDATE: Okay, I think I've got it working satisfactorily now and would appreciate any advice in terms of drying this up properly: http://jsfiddle.net/j9aNh/3/
I do not know if that what you are looking for but it could be as simple as that I think.
$('select').change(function() {
var country=$(this).val() //or if you want to get text you may use var country=$(this).text()
var maskuse;
if(country=='USA')
{
maskuse="(999) 999-9999";
}
if(country=='Canada')
{
maskuse="(999) 999-9999";
}
/// and soon changing mask for a country
$("#user_phone").inputmask("mask", { "mask": maskuse });
});
if you are looking for Selection of an input mask for a phone number, use inputmask-multi