I'm making an flight search app with Sencha Touch and have encountered a small problem.
I want to create a textfield for all the airports and need autocomplete functionality for in order to make it easy for the user to choose departure airport and return airport. How can i implement this? The airports will be loaded via XML-schema and I can't seem to find any good documentation for this feature.
Thanx in advance!
Since there were no custom components out there and I needed something like this myself as well, I smashed it together.
So, here it is. Sencha Touch 2 Autocomplete Textfield component:
https://github.com/martintajur/sencha-touch-2-autocomplete-textfield
It currently uses AJAX request response for populating the autocomplete matches. It also supports custom input by the user.
When serializing the form data, the value of this type of input will be:
the selected item ID in case user has selected a matched autocomplete result
the typed text when the user has not chosen an autocomplete result
It is very basic at the moment and completely driven by own need for such a control.
Feel free to fork, modify, adapt. It's MIT-licenced.
I think you should use a searchfield instead of textfield as suggested by #Ismailp,
Then you should create a popup(a panel) in its keyup event, which should contain a list of Airports.
Go through the hidden folder list-search in the example folder in downloaded sencha framework.It shows how to search through a list.
Related
Basically, what I want:
When I start entering the name of a city, I get a drop-down list of options that match the letters I've typed in. I want to firstly use some data which I create manually (like 10 cities with the same name, I don't really care about it for now), but I can't figure out the way to make it work - should I use both input and select and somehow hide select behind input, or using just an input tag would be enough?
This is called autocomplete and there are many tutorials online that will walk you through the process. Here are a couple:
https://www.tutsplanet.com/autocomplete-js-simple-pure-vanilla-javascript-autocomplete/
https://www.w3schools.com/howto/howto_js_autocomplete.asp
You can find many others, including on YouTube.
Some considerations in choosing a tutorial: do you wish to populate the search suggestions from a back-end database, or only from a variable in javascript? If from a database, what back-end language do you want to use (PHP? Node.js?) Which database (MySQL? SQL?)
I need to create an input on my reactjs application where, I have an array of names populating a select. Here, when a user types a name that does not exit in the array used to populate the select, he should have the option to still tag this username into the selected list( indirectly a new item on the list). Also, the user needs to be able to tag multiple users.
It should work exactly like the Multiselect of react-select Component https://jedwatson.github.io/react-select/ except for the fact that, selected values also accept values which are not part of the dropdown
If there are any existing solutions to this in react, I will really love to take a look at them.
thanks and waiting for your help
Isn't this already supported via the Creatable version of the react-select?
I am trying to create a search box for searching structured data, where all the fields are known. I want to create a type ahead search box which has two types of typeaheads: 1. Type ahead for fields 2. Type ahead for values of a specific field. Image below shows what I am trying to achieve.
I already have the backends ready to serve typeaheads and searches. I am not able to figure out how to create a custom text field that can submit multiple form values and query multiple typeahead backends
This is a lot like gmail or kibana search boxes. Will appreciate examples or if someone can point me in the correct direction.
PS: A complete javascript newbie here. I can only understand pure js or jquery.
I suggest using a jquery library would be easy option to this. Looking at your question, i think select2 or bootstrap multiselect could probably help you.
Let me first explain the use case. Consider Gmail for example, when you type in the search box "from:user sample search query", Gmail will filter the results with the specified user. My use case is similar, but what I want is, when a user types in "from:", I should show the user a list of options that could be selected. Basically some form of autocomplete as soon as I detect that a ":" has been typed.
For instance, "from:" and "to:" could be keywords that could be used in the search query. Now, I want to show a dropdown (autocomplete) when a user types in "from:" and a different dropdown when a user types in "to:". The point here being, depending on the type of search-filter, I will need to query a different API to fetch the list of values for autocomplete.
A very rough example of a full search string would be "from:abc#xyz.com after:10Nov2017 hope you are well". Once I have this string, the search part is trivial. I just want to know how to show an autocomplete box as soon as the user has typed a ":".
I have looked at a lot of Stack Overflow answers related to autocomplete. But my use case a little more complicated than the resources I have been able to find. Please redirect me to appropriate source if I have missed something.
You can jquery plugin for this. Check this autocomplete plugin
As i understaood,this will fulfil your requirement. For All Complete event,you can study api documentation
I've read through nearly all the posts on jQuery UI autocomplete, but I still can't figure this out.
If there isn't a match, I need to append an item to the list that says something like:
Create an entry for "Search Term Being Entered"
so it can be selected and I can run a function to deal with a new entry.
The problem I'm having is figuring out which event I need to hook into to update the menu and list.
This question may point you in the right direction:
Detecting no results on jQuery UI autocomplete
Be sure to look at the fiddle in Andrew's answer:
http://jsfiddle.net/andrewwhitaker/VBTGJ/
Wouldn't the server normally decide if the user entered a 'new item'?
I'm just making some basic assumptions here about your environment. The auto-complete list comes from some MySQL data. So the server should know if a term is new. Never trust user input from the client.
An autocomplete UI is not a way to force a certain input, it's merely a tool for the user to reuse existing or common values. The actual interpretation should happen on the server.