I am working on implementing a data-live-search element within a select. I currently have it so that the live search results are returned only if the option startsWith the search term, through usage of: data-live-search-style="startsWith".
I would like to have the results include options that also just include the search term. If I remove the data-live-search-style="startsWith", I see this behavior; however, I want results that match the startsWith condition to be displayed at the top, such that if it is necessary, a single optgroup label will display twice.
For example, suppose I have the following select set up, with a data-live-search included:
<select id="sp" class="form-control selectpicker" data-live-search="true" data-live-search-style="startsWith" multiple>
<optgroup label='Vegetables'>
<option value='celery'>Celery</option>
<option value='carrot'>Carrot</option>
<option value='artichoke'>Artichoke</option>
</optgroup>
<optgroup label='Fruits'>
<option value='cherry'>Cherry</option>
<option value='apple'>Apple</option>
<option value='papaya'>Papaya</option>
</optgroup>
</select>
If the user types in "ch", the search results should be Cherry (under Fruits optgroup label) and then Artichoke (under Vegetables optgroup label). Using data-live-search-style-"startsWith" means that I currently only see Cherry. Is there any way to order by "startsWith", and then display options that "contain" the search term? Thanks!
I think you can apply select2 plugin for that situation.
Related
I am using jquery.uix.multiselect by yanickrochon, API documentation here:
API Documentation
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="AND">Andorra</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AZE">Azerbaijan</option>
<option value="BGD">Bangladesh</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
</select>
And JS:
$(".multiselect").multiselect(
{availableListPosition:'left', sortable: true }
);
When I select a country, it goes to the selected panel sorted, I enabled sortable so I can drag and sort manually. My question is: is there a way to append the newly selected country to the bottom of the selected list? instead of automatically sorted along with the selected list.
The one option I see sortMethod can disable the sorting, but would like the un-selected list to be sorted for easy find. Does anyone with experience with this?
In sort, I am looking to keep the un-selected list sorted while items in the selected list is appended to the bottom.
So i have these options.
<option value="bentley">Bentley</option>
<option value="ferrari">Ferrari</option>
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="peugeot">Peugeot</option>
<option value="citroen">Citreon</option>
If i click on honda, the honda cars are displayed. IF toyota then toyotas..and so on.
I would like to make an option, where i only reference the luxury cars. Just do not know how to make it work.
<option value"ferrari:bentley">Luxury cars</option>
Any ideas?
Note: It can help others, who would like to reference more than one value in an option. As I was searching around for 1.30 hours there is not much out there.
Thank you in advance
You could use an optgroup
JSfiddle
<select name="carss">
<optgroup label="Luxury cars">
<option>Ferrari</option>
<option>Bentley</option>
<option>Rolls Royce</option>
</optgroup>
<optgroup label="Others">
<option>Honda</option>
<option>Ford</option>
<option>Toyota</option>
</optgroup>
</select>
For multiple values in option tag use below code
<option value="{'num_sequence':[0,1,2,3]}">Option one</option>
<option value="{'foo':'bar','one':'two'}">Option two</option>
First one is using array and second one is using Object.
Refer this for more info.
You should do like this
create a Table with Car names and its type like
Luxury,Sedan,etc.
Allow users to select cars based on types or car name.(dont combine
both)
Then when user select Cars by type you need to get cars from first
table corresponding to that class name
I am using a modified version of the jquery plugin jquery.chained.js to filter out select box options and checkboxes based on another value of a select box. However, now I am needing to filter a select box based on what options 2 of the previous select boxes are.
I have 3 select boxes.
Staff
Rooms
Services
and a few checkboxes OR select boxes for
Addons
The above addons depends on a preference to either show it as checkboxes or dropdowns
The way it is right now if you change Staff then the Services and Addons options will change to what ever services that staff has access to. However I now need to make it so that Services and Addons will set based on what Staff has access to those Services and what Rooms Offer those services.
Is anyone able to help me modify this already modified script to add support for multiple select boxes? I want to try and keep it generic as we may possible be using this chained to script for other elements as well.
To sum up what I am looking for is to add support for Rooms select box to further filter down the Services and AddonServices options.
Example code can be found http://bit.ly/uzEDL2
EDIT: The checkboxradio() is for jquery Mobile so don't worry about those.
To make child select depend on values of two parents use classname like first\second. Note that if you have really complicated select structure maintaining this kind of classes will get cumbersome. In that cause it might be easier to use the remote version of the plugin.
Example taken from plugin documentation. In this example diesel engine is available only for BMW 3 and 5 series Sedans. This is achieved by using classnames series-3\sedan and series-5\sedan.
<select id="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model">
<option value="">--</option>
<option value="coupe" class="series-3 series-6 a5">Coupe</option>
<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
<option value="sportback" class="a3 a5">Sportback</option>
</select>
<select id="engine">
<option value="">--</option>
<option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option>
<option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
<option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option>
</select>
$("#model").chained("#series");
$("#engine").chained("#series, #model");
Note that your HTML is not valid. Single number is not a valid class name. Class name must begin with an underscore letter [a–z], underscore [_]or dash [-] then followed by numbers, letters, underscores and dashes. Better explanation can be found from: Allowed characters for CSS identifiers.
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.
Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?
Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks
The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;
When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here