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?)
Related
I'm looking to get some help either identifying the "programming words" for this type of element, or looking to get help finding libraries that accomplish this feature.
I'm looking for an multiselect input that would allow users to select a "filter" or key from the list. For example, the user selects ipAddress from the list, the search bar is then populated with ipAddress= then after the user enters the address and presses comma, it turns into a badge and then the user can add more filters.
I've tried using Choices.js and Selectize but neither allow for the functionality I need.
Thanks so much for your help
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'm using parse.com with a cordova based mobile app and I ran into an issue dealing with a list page that has different type of items. For the sake of the example, imgine three types of items- text, image and event.
My solution for this problem was to create three different types of parse classes: Image, Text and Event, Each with it's own special fields, and a Message class that has a pointer data field from type Parse.Object that will contain anyone of the three type of classes.
The problem is I'm not compleley sure on how to make the data field point to an Parse.Object. There's no option for this in Data Browser and, as I understand, in the JS SDK this happens autoamtically the first time you set a value from some type for the field. (e.g If I save Image on data, it'll lock me to use only Image from here on out).
Would love to hear if anyone know how to achive this or, if enyone has different idea for making a list with differetn types of items.
Thanks
This sounds like Single table inheritance pattern here more info. My suggestion is to keep all three classes in one Parse table called Message and in Message table should have field type which will have value for concrete type of your objects. In that way you will query, filter and sort only one table. You can also easily add more objects to this table.
Keeping all objects in one table have pros and cons. Please consider well your decision.
I can't quite figure out a work around for using "Use view dialog for choices" in a web based application.
My Question is how can i convert this settings in my field in the Control Tab then Choices, in choices "Use view dialog for choices" then Use current database and access view and a specific column.
Thanks in advance :)
"Use view dialog for choices" is almost always a way to get around the restrictions on the return value of a formula. For instance, you'd use it when #DbColumn in a choices formula for a listbox or dialog list choices formula would cause an error.
The upshot of that is that there's no "one-shot" workaround for the web. A direct functional replacement would be to open the view in a pop-up window or overlay div, and attach some JavaScript to the view in order to override the default web behaviour and force the return of values to a field on the main document. This approach will work well, but it may require server settings that allow the entire view to be served at once (the maximum lines to display per page will probably be less than you need), and it's subject to breakage if the HTML used to display the view ever changes.
You can use LotusScript or Java in a WebQueryOpen agent to populate a conventional widget (the list of a element) in a Rich Text field, either using PassThru HTML or a "Treat contents as HTML" form. That would involve getting the view, then doing a document-by-document (or category-by-category) run through the view index to get the column values you need. (If you take this approach, use the ColumnValues rather than the document field name to retrieve the values -- the cost of opening the document to read the values is high, and your code will take many times longer to run.)
You can also get the view as need using an AJAX request and a ?ReadViewEntries query, which will return an XML representation of the view. Again, you may have to have the maximum view lines per page limit upped in order to get the amount of data you need. You can get around that, though, by using a "suggest" method that doesn't begin retrieving data until the user enters at least one character into the field.
All of these approaches mean using a separate form for the web. That's easy enough -- you simply create a form with the same alias (or name, if you're not using aliases) as the one you're using for the Notes client. In the list of forms in Designer, you can use the hidewhen tab to hide one from the Notes client and the other from the web. (Note that you can create an additional form for mobile devices the same way if necessary.)
I can't get more specific than this with the information at hand. If this is insufficient to point you in the right direction, then edit your question to be more specific (and post a comment to this reply -- I don't spend a lot of time on SO, but I do spend time on other StackExchange sites, so I'll be notified).
Unfortunately, you have to develop it yourself.
http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=AJAX%20Name%20Picker
AJAX-based name picker is a good start I guess.