I want to create a dropdown when you click on an icon where you can search through data. I will clarify this with an image:
You can type your quiz name on the .... rule.
Then in the second part of the dropdwon you will see the quizzes from the database depending on the search terms.
In the third part of the dropdown I want to show the last 5 surveys (this has to be static, not chaning when the search terms change).
In the fourth part of the dropdown I also want to show static values.
Is this possible to do with select2.js ?
Or can someone help me start with this? I don't really have a clue on how to begin with this. I know how you can show data according to the search terms. But it's the third and fourth part of the dropdown that I don't really know how to show also under it ...
you can use any dropdown api but if you want to autocomplete with static value you should use html5 form element "<datalist >"
here is example
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Related
I have this code for a dropdown list input in a form:
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
...
</datalist>
<input type="submit">
</form>
It shows this:
However it only shows the list after I click on the input element.
I'd like the dropdown list to always be shown. Is it possible to achieve?
datalist element is hidden in rendering
According to HTML spec:
In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
What you describe in the question and screenshot seems to be the expected behavior: i.e. displaying the list of options when input is active. If you need to display the list at all times, perhaps you might want to consider an additional (or an alternative) element to do that.
I'm trying to create a select with a list of coins and ready-made images with a "type to search" method, exactly as it is in the images. After several searches on the internet I can't find anything that gives me the same result as the image.
Does anyone know how to do this with HTML, CSS and JS??
1.select
when the user clicks on select it shows the option of "type to seach"
when the user starts typing
What you can try is the following solution :
<input id="searchCountries" list="countries" placeholder="type to search">
<datalist id="countries">
<option value="🇫🇷 FRANCE">
<option value="🇨🇳 CHINA">
<option value="🇺🇸 USA">
<option value="🇪🇸 SPAIN">
<option value="🇧🇷 BRAZIL">
</datalist>
With a little bit of CSS it should exactly do what you want.
And if you want there's a lot of library that can do this.
I have a website with a lot of products I've made in Wordpress. To make it easy for my visitors, I would like to make a search function with dropdowns.
My idea is, that my visitors have to select some categories in some dropdowns, and eventually press a search button to then display products that matching, what the visitors had chosen.
These types of dropdowns I think are like thise: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select
For that you need to create a custom dropdown and not select list. ALternatively you can use datalist
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
I am looking for a solution to an issue I have with a current MVC 4 project I am working on. I would like to have an editable dropdownlist control, or combobox as I think this type of control is sometimes called. Where the control would operate as a typical dropdown control, but allow the user to type in a value that is not present in the dropdown list. I have had no luck with my search so far so I am hoping that this great community of developers could point me in the right direction. Thanks!
If you use HTML then you can use input with datalist attribute
Example:
<input type="text" name="fieldName" list="valueList"/>
<datalist id="valueList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>
I noticed Google calendar uses this instead of <select>
<input class="text dr-time" id=":3r-st" size="7" title="From time" tabindex="0" dir="ltr" />
It let's the user type the time instead of selecting an option from the drop down list. Is there a plugin or nice widget someone wrote that does the same thing?
You might want to have a look at one of these JQuery plugins:
http://ivaynberg.github.io/select2/
http://brianreavis.github.io/selectize.js/
http://harvesthq.github.io/chosen/
A more lightweight approach might be, assuming you only have text and not dates, using the data-list attribute:
<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
I copied the above code from here: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist
Maybe Chosen is something for you. It's a JavaScript SELECT replacement, which adds multiple new opportunities:
http://harvesthq.github.io/chosen/