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
Related
I am using a a simple jquery autocomplete, in one of my input field in
JSP,using below code.
$(function() {
$("#MyAutoComplete").autocomplete({
source : document.getElementById(myDataList).ToArray()
});
});
In JSP,
<datalist id="myDataList"></datalist>
<input name="MyAutoComplete" id="MyAutoComplete" size="37" list="myDataList" type="text"></td>
Datalist is getting populated with an script call when page is
loading, which in turn calling Action and DAO classes, to fetch
objects from DB and filling the list.
Now problem is, say I have three
String in my list, "Bob is a good cat", "We have a cat named Bob",
"Cat Bob is funny". When searching in jsp field with Bob in Mozila/Chrome all
three of them are coming , which is correct, as all of them has Bob in
them, but in IE only "Bob is a good cat" is coming, as that is the
only string starting with Bob, its not able to search in middle or end, I am not sure what is the issue here. Please help.
I am using jquery-1.10.2.js, jquery-ui.js.
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
I'm trying to add some client-side Ajax validation of my Django form. I want to warn users, as they are typing in a field, if any of the characters they just inputted are not ascii.
I originally put the basic python to check for ascii characters in my form's clean method. I don't want to do that, though, as I don't want to produce an error but rather just give a warning message and let the user continue with the rest of the form.
try:
field_value.decode('ascii')
except UnicodeEncodeError:
#raise forms.ValidationError("Non-ASCII characters may cause issues in registering your data. Consider removing these characters. You may still submit at your own risk.")
# Just want to show a warning so the user can still submit the form if they wish
I want to show a small warning under the field as the user is typing. I've tried using django-dajax, but am not sure. How can I do this?
EDIT:
To clarify, I want to show the warning before the user submits the form. So, as they are filling out the form...
Use
> <input type="text" pattern="^[\x20-\x7F]+$" id ....>
in html
Use JavaScript to validate that form field.
Example (using jQuery):
<form>
<input name="whatever" id="fieldId">
...
</form>
<script type="text/javascript">
/* Define a function to check the form field value */
function containsAllAscii(str) {
return /^[\000-\177]*$/.test(str); // returns true if all are ASCII characters. false otherwise.
}
/* Now a little jQuery */
$('#fieldId').on('change', function() {
str = $(this).val();
is_valid = containsAllAscii(str);
if (!is_valid) {
window.alert("There are Non-ASCII characters in the input field");
}
});
</script>
The above code will check the given field's value whenever it changes (i.e. loses focus). You can use .on('keyup', ... instead of .on('change', ... which will check the field's value as the user is typing.
Finally, the error message that is shown is just a browser alert. Which is crappy. You can display a beautiful error message, you just need to learn a little more of jQuery. But I hope I've given you a good starting point.
Credits:
The code for containsAllAscii function is taken from this answer by Juan Mendes.
In your django form, create a custom field and take advantage of the media class.
from django import forms
class MyWidget(forms.TextInput):
class Media:
css = {
'all': ('pretty.css',)
}
js = ('animations.js', 'actions.js')
and set the js to the javascript file you will use for validation. something along the lines of the the other answer
https://docs.djangoproject.com/en/1.9/topics/forms/media/
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 have implemented dbsight on my server. It is working fine. Just one option is missing: it is not showing me autosuggestion on the search result page like in the demo page:
http://search.dbsight.com/search.do?indexName=freedb&q=u2+beautiful+day
In my search result page it is not displaying me suggestion list.
I have found the suggest.ftl file but it's doesn't produce anything.
You can check it over here.http://filesinn.com/
search the term and I show the ajax call on the firebug console but it will not populate suggestion list.
Can any one help me out?
Thanks.
They do use the jquery.suggest.js for this I think:
http://search.dbsight.com/templates/freedb/html/resource/jquery.suggest.js
To acitvate it on your input field with id="q".
jQuery(function() {
jQuery("#q").suggest("suggest.do?indexName=freedb",
{
minchars:1
});
});
It make a query like this on keypess:
http://search.dbsight.com/suggest.do?indexName=freedb&q=u2+beautiful+d
At first I also fall in the trap of thinking that you had implemented autocomplete on your homepage. But after spending some time I realized that was not autocomplete from the server what I saw, but the browser autocomplete.
In your homepage you better add the autocomplete="off" attribute to your input field in order to disable the browser from helping the user with autocompletion from all the history of things he typed in a field named "q".
Then keep learning from the DBSight documentation:
Integration with existing systems - Step 2 Add javascripts (for you homepage only):
<script type="text/javascript" language="javascript" src="http://filesinn.com/search/search.nocache.js"></script>
<script language="javascript">
function dbsightOnLoad(){
new dbsight.Searcher().server("http://filesinn.com/dbsight")
.indexName("foxsaver")
.setup();
}
</script>
How to add/customize Suggest-As-You-Type?
var s = new dbsight.Searcher();
s.addSuggestion();