AJAX auto-suggest combo box - javascript

I’m looking for an AJAX-enabled combo box with the following features:
The combo box accepts entries selected from a drop-down as well as free-form text entered by the user (kind of like the text field used to enter tags for StackOverflow questions)
The drop-down list contains a limited number (less than 10) of suggestions based on what the user typed so far
The suggestions are pulled from a primary list and a secondary list. The secondary list is consulted if the user’s input cannot be matched to anything in the primary list. Both lists are generated on demand by my application running on the server.
Any suggestions?

jQuery-ui has an autocomplete plugin that offers this functionality.

Related

Control Text Box control's Text in D365

I have a requirement in Dynamics 365 online to control the behavior of a multiline textbox which stores call script messages.
There is a drop-down list on the form which populates the call script messages on to the text box when the user selects some options.
User can then edit these populated messages in the text box. Later if the user decides to remove some options or add some options from the drop-down, the respective messages should be deleted from the textbox.
I know this can be accomplished using html by tagging each text related to the option in the rich text box but not sure how this can be accomplished in D365 in a supported way?
Can it be done using some scripting or can it be done using web resource embedded on the form.
You can achieve this way. Source field is dropdown, destination field is multiline textbox where content has to be populated based on option selected in dropdown.
This can be done by having some placeholder markers & replace the dynamic text. But this is too complex to maintain
Just furnish this using onChange script of dropdown, you can have some configuration entity to store the pre-defined text for each dropdown option, just pull the respective content on the change of dropdown option & concatenate/replace the content of multiline with retrieved configuration text

Pull a variable and category from a forms option select and post it to a hidden input

I am trying to pass to variable from a form select but I am running into issues.
How do I accomplish sending the catSubcat, value, and more variables. I have tried so many different things.
Update: I have created the jsfiddle below. I kinda have to be vague due to security here.
With the example html you will see category (DA, DC, etc..), multi acct code(M02 or M03 based on the amount), multi name (Bundle). For testing the clients can make up the inputs to do their testing. Once I receive the code from the other department I have to hide all the inputs except the products, but they will populate into a hidden field.
How it is supposed to work: A user goes to the account page and selects however many and whatever account. Based on their selections the category, multi code and multi name will be passed through the submit to another page and submit all the variables.
Not my code and I cannot change it due to the other departments requirements.
<https://jsfiddle.net/jm1w6ycv/2/>

OpenCart Auto-complete CMS not working

I'm currently developing a site in OpenCart for a client of mine and they are having issues adding filters and categories to products. When they try to add a category by typing in the category name, it sometimes does not show up. If it does show up and they click on it, it sometimes does not detect that it has been clicked and does not add it (despite clicking it multiple times).
Another thing my client does not like about this, is that when they forget what categories they have or what names of them are, they do not have any way of choosing them. It would be good if there was maybe a dropdown list or a select input
<select multiple="multiple"></select>
Has anyone had these issues before and if so how did they fix them?
Edit
Sorry forgot to mention I'm using Version 2.0.3.1 of OpenCart.
If your opencart is multi-language you can search only with the selected language in the admin area.
Empty category names in search means empty category name/title for the selected language.

jQuery Autocomplete / django-ajax-selects: how to add selected item to a display area, and to allow creating new item?

I want to provide an Autocomplete feature that's similar to the example provided by django-ajax-selects:
user types apartment name in a textbox, a list of autocomplete suggestions is provided. Each suggestion includes unique_id, name, image, address, etc.
user can select from the list of suggestions. Once selected, details of that apartment is added to a display area below the textbox. There's also a "delete" icon to delete a selected apartment
If there's no match from the existing apartments in the database, user can create a new apartment
When the form is submitted, if it contains an unique_id, that id will be used to look up the existing apartment from the database. If the form doesn't contain an unique id, a new database entry will be created using the data entered by the user
django-ajax-selects is built using jQuery Autocomplete, but the above functionality is quite different from the standard behavior of jQuery Autocomplete and I can't quite figure out how to make the javascript works.
How do I use jQuery Autocomplete to implement this feature? Any help is greatly appreciated. Thanks.

How to make a "hybrid" HTML drop-down list that can work as a text box as well?

For my website, I need to have a way for users to enter their cities.
I'd like to use 2 drop-down list for that: a "State" and a "City" drop-down lists. The choices in the "City" list would depend on what "State' has been selected.
However, there bound to be cases where a user's "City" is not in the drop-down list. To handle those cases, I want the "City" input to be a "hybrid": while users could select a choice from a drop-down list, they could also use the input as a textbox and simply type out their city name.
An example of what I have in mind is Google Map. Enter any address into Google Map. Then click on "Directions" on the left panel. Then click the "By public transit" icon (2nd icon from left). The right-most drop-down box is what I'm talking about. You could select choices like "1:00pm", "1:30pm", "2:00pm" etc from a drop-down list. But you could also just type out a time like "1:23pm" inside the box.
How do I do something like that? Is there any javascript library/framework that does that? I'm currently using jQuery.
There are lots of JavaScript examples of this, using JQuery, or native JS. They're typically called combo boxes - for their ability to select from the drop-down or accept typed entry - most of them including settings to enable free-form entry vs forcing selection from the list only. I don't have any experience with a specific type, so I won't make a recommendation, but if you Google "javascript combo box" that'll get you started in the right direction :)
If you view source on the GMaps directions page that you are referring to, you can see how they do it; the "dropdown" button is really just an image. When a selection is made from the dropdown, the value is put into the textbox.
Some solutions I've found for whom it may concern:
Using select2 library and Tagging .
Selectize is the hybrid of a textbox and box.
Using Vue frawework see vue-multiselect and tagging support.
So probably you can consider "select taggging support" a good combination of words to search at Google.

Categories