How to force a user to select values only from autocomplete popup - jquery-ui

I am using jquery UI autocomplete for zipcode text field.I want to force user to select only zipcode that are coming in autocomplete options.
Before Asking this questions I have searched a lot on above question But I didnt get any solution for my scenario.
Actually I am using Ajax call to get json response from www.geonames.org site
which has responses with zipcode ,state ,city & some other values.
My problem is that I am unable to implement functionality which will force user to select values only from autocomplete.
How to do it any hints and answer are helpful for me

You might want to think of the UX implications of using an autocomplete to restrict a user's input on a field. More often than not, these types of controls are used to help suggest possibilities, not restrict. Think of goggle suggest as an example.
However, to answer the question. You could check the value of the input against the returned results from the autocomplete on blur to make sure that it matches at least one of them. I found a working example of this here.
The other popular way to do it is to populate a hidden form element that is only populated by the autocomplete result event:
https://stackoverflow.com/a/2585868/159341

Related

Place Autocomplete in iOS (swift) on Signup (address) form

I am a signup form which has bunch of text fields like name, phone, address 1st line, city, state etc.
Can I use googles's Place Autocomplete on this form in such a way that when I start typing address 1st line in one of the fields it suggests/auto completes and fills the city and state
1st question, is it possible, if yes are there any examples or tutorials?
There are examples out there but they use autocomplete UI, I want to be able to use my own edit text fields.
So Yes I was able to do exactly what I wanted.
I had two dependencies for this.
1. AutoComplete Text Field
2. Google's Place AutoComplete

ListGrid: Need to show icons in an editable field for a many to one relationship

My problem seems simple. But have not been able to solve till now. Any help would be appreciated.
I have a listgrid showing certain records from a datasource. One of the fields is a many to one. When I try to edit any record, I get a dropdown with all the possible values that the record can have. All fine thus far. The issue is that all the dropdown values are displayed as simple text. I wish them to be displayed as shown in this link.
The requirement is to have "A SelectItem with icons" on the listgrid.
Regards
Use ListGridField.setEditorType() to customize the editor shown for a field. This API takes a FormItem, so pass a SelectItem configured similarly to the sample you linked to.

Auto Search functionality for Schools/Universities using Asp.Net MVC

I am building a website where the user should have the capability of adding their School/University. I have noticed in LinkedIn, when i tried to type in my school name , it showed up a auto search box with all the schools, beginning with the letter i typed. How can i achieve the same functionality?
Do they save all the Universities in their database ? Or is there any Open webservices i can use that will show all the Schools/Universities ?
Thanks !
This feature is called "Auto Complete" and the text boxes are enabled with that. These allow you to filter the data required according to the characters you type in.
Please see this post for auto-complete feature implemented using jQuery.
Razor: Auto-complete text box inside jqGrid, How to bind values?
The example shown in that page lists all from the database. However, as a next phase, you can as well extend this feature to look for a WCF exposed service for universe of schools/colleges.
FYI" "GetSkillNameAutocomplete" is a method in the controller that takes a string parameter as an input (the search string) and gets the value(s).
Hope this helps!

auto_complete_for: prevent the first item from being auto-selected

The auto_complete_for dealio from script.aculo.us is great an all, but is there a way for me to selectively disable the fact that it always auto-selects the first item in the list?
The problem is that, if I want to type my own entry that is new, and novel, I don't want the first item in the list to be auto-selected. The reason is because when I TAB out of the field, it selects, and fills the text box with that first item.
I got around that, somewhat, by making the first item in the list the same as what I'm typing, but that's not perfect either, because the auto_complete list doesn't always update with every keystroke, depending on how fast I type. I've tried setting the list refresh rate to the lowest value (1 millisecond) but no go.
What I really want is an option in "auto_complete_for" that doesn't select that first item at all - the same way that Google Instant doesn't automatically select the first suggested search phrase - you have to arrow-down to select one.
Maybe I can do this via an HTML option that I'm missing?
Looking at the source, there doesn't appear to be an option for that, but I bet if you changed line 284 of controls.js to this.index = -1; it would do what you want.
Otherwise, it might be time to look for a different autocomplete widget.
If your requirements are too far away from the available plugin, then I guess there is no point in tinkering around. Its best to write your own JS code.
You might want to consider this: https://github.com/laktek/jQuery-Smart-Auto-Complete
or this : https://github.com/reinh/jquery-autocomplete
I'll add another alternative that works great with Rails 3:
http://github.com/crowdint/rails3-jquery-autocomplete
I recently implemented auto complete for more than a field for Rails 2.0.2.
The plugin I used is:- https://github.com/david-kerins/auto_complete . Not sure if it supports Rails 3.
I have also encountered issues on implementing the above scenario and have posted questions( Implementing auto complete for more than one field in Rails ; Implementing a OnClick kind of functionality and formatting wrt Rails Partial-Views ) on stackoverflow for the same, I have been lucky on getting things working for me based on my requirement.
Kindly refer to these questions, they might have relevance to your requirement.

Delphi Search Edit Component

I need a delphi component for Delphi 2007 win32 that have features like Google search text box.
** While User writing search key it should fill/refresh the list with values, and user can select one of them.
**User can go up and down list and can select one of them.
**List should contain codes and text pair, so user can select text and I can get code for database operations.
(Google can highlight the search text in List but I think it is not possible with Delphi 2007, so it is not expected.)
I tried Dev Express TcxMRUEdit, however it doesn't meet my needs
Since you have DevExpress, why don't you try the cxLookupComboBox in lsEditMode and with ImmediateDropDown = True?
Check out woll2woll components. The TLookupcombobox has done this since Delphi 3 (or earlier). This is not spam, I just use the library.
http://www.woll2woll.com/
I also had the same problem and unfortunately didn't find a suitable component. I was also inspired from google.
So it turned out to be easier for me to "simulate a component" by using an editbox and a grid placed under it. As the user types something in the editbox the query refreshes and the proper resulst are shown in the grid. I have many columns in the grid, the query results try to match all the fields (so if I type 'po', the query will return all records where any field is like 'po%'). I also added a delay of 500ms after the user types to avoid to run too many unnecessary queries (another aproach could be to kill the thread as the user strikes a new key, if the query is run in a thread).
In this way I obtained the required functionality, even if without higlighting the search text, anyway my users are delighted by this.
In every place I am using this "component" I am attaching a query at runtime so it can be used in many different forms.
I somehow was also inspired by the skype UI: when you display the lsit of contacts you can type something and the contacts will be filtered accordingly (skype uses an editbox + grid/listbox).

Resources