I want to create a drop down menu (like an <options> tag) in an HTML form. The issue is that I also want the user to be able to not only select from a list of options, but also type in their own if they want. So it would almost be like there was a text field that was automatically filled when you selected something from the drop down box, but you could still edit it.
This is the sort of thing I mean, only its a desktop app on windows (notice how the text can be edited):
I'm pretty flexible about exactly how it looks. If there is another, easy to implement, solution where the user can easy scroll/see a list of options or add in their own that doesn't look like what I described, I'm open to the idea.
Most of the drop down auto type scripts out there will let you type into the input box text that doesn't have to match one of the options in the options list. Just when you go to submit the form be sure to check to see if there is a selectedValue in the drop down and if not grab the drop down's text instead. How to do this will vary on what script you are using. As to what type ahead drop down script to use there are plenty out there, here is an ancient one that works pretty well but there are lot's of others.
http://trappedinhoth.blogspot.com/2008/07/jquery-autocomplete-example.html
HTML 5 even supports an autocomplete drop down
http://trappedinhoth.blogspot.com/2013/03/html-5-datalist-key-value-work-around.html
I hope that points you in the right direction.
Related
I'm trying to build a Chrome Extension that autofills a website form. The form has several drop down menus. However, these are not coded with the HTML select object. Instead, they're coded with the HTML input text object (see the attached photo) (https://i.stack.imgur.com/6FynG.png).
I'd like to build functionality that mirrors selectedIndex and select one of the drop down menu items.
Is this possible?
I've tried 3 things:
I've used .execCommand to mimic the user typing into the input box to narrow down the number of drop downs that appear. This isn't a complete solution because the user must still click on the drop down menu.
I've used .innerHTML and similar methods to change the websites HTML, so that it matches the output of when a user selects an option from the drop down menu. This makes the website look like the user has selected an option, but it doesn't full work either. As soon as the user clicks outside of the input field, the field revers back to being empty (maybe the form is refreshing?)
I've explored using Selenium, but I don't think it makes much sense here. I'm trying to build a Chrome Extension for other users, rather than automate testing.
I need to add multiple attribute to a select list, but unfortunately the dropdown list is not editable through HTML since it is a drag and drop feature of a CMS (Spiceworks user portal) I am using.
The CMS is quite outdated; my only other option is to add checkboxes which would make the page extremely long, since there are a total of 15 options to select. (In my example, this is different)
There is no listbox option in the CMS, which is why I need to use javascript to force the dropdown to act like a listbox.
Please look here at what I tried to do: https://jsfiddle.net/jamiedewitz/sdyn0xqz/
Is there a way to force javascript to add the multiple attribute to the dropdown list or is this just wishful thinking?
Sure
const addMultiple = select => select.setAttribute('multiple', true);
You can then use a CSS selector to target one or multiple elements
addMultiple(document.querySelector('#custom_ticket_form_field_55'))
document.querySelectorAll('select').forEach(addMultiple)
By the way, id="custom_ticket_form_field_55" is used in multiple places in your HTML, so actually the first variation wouldn't work. If you can, try to make your ids unique.
Note that it also breaks accessibility because your label doesn't point to the select anymore.
I'm trying to use html5 datalist in my program (angularjs) because I want the user to have the possibility to enter an option which is not in the list.
However, what I have noted so far is, when using the html5 Datalist, you loose the possibility of choosing an item in the list by just writing part of the text and pressing tab. What happens is the input element retains just what you typed and not the complete item in the list.
Is there a way to make Datalist+Input to choose the whole item in the list by just typing part of it and pressing tab??
Many thanks for your help and bye ...
Well I just ended up using selectize.js in my project.
This is a jquery plugin that can use an (html) Input to allow the user to select an option from a list, but also permits the user to type a new option (which is not in the list). This is exactly what I wanted.
There is a great post about using the plugin in Medium:
Using Selectize.js to Make Your Forms Better
Many thanks and bye ...
I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.
The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.
I am looking for a plug-in or way to duplicate the default combo box from visual studio in C#, where you can select from a list or type in a new value. I have found several plugins to "search" or act as an autocomplete for a select element, but I want the user to be able to see all options at any time through the drop down, and add their own through the text bar (or select an option then edit it, to either make a new option or permanently alter the selected option).
Does anyone know such a plugin?
I found this the other day, seems like it would meet your requirements: http://harvesthq.github.com/chosen/
(NOTE: I haven't used it yet so I can't comment on how well it works)