I'm doing a list, and the user can filter it with a input text. Now, the field is separated from the select, and I would set the input as an option, like in this image
This is my CODE. Thank you very much!
<div class="row">
<div class="col-md-2">
Search: <input ng-model="query">
</div>
<div class="col-md-10">
<!--Body content-->
<select class="phones">
<option ng-repeat="phone in phones.data | filter:query">
<span>{{phone.name}}</span>
<span>{{phone.age}}</span>
</option>
</select>
</div>
</div>
It is a somewhat complex task, I recommend you use an existing component/library unless your requirements are very, very special.
I can recommend Chosen, which will help you create dropdown menus with filtering through textbox:
https://github.com/harvesthq/chosen
Regarding your requirement from the comments, the need to search not only from the beginning of a word, there is an option in Chosen to achieve that - it's called "search_contains". Refer to Chosen documentation for details:
http://harvesthq.github.io/chosen/options.html
Also see this StackOverflow question regarding "search_contains":
Changing search behavior in jquery plugin Chosen
Related
I am inserting a small editable select-option in a html form. But i don't want to send it. So i need a select-option version of this
<div contenteditable="true">
This text can be edited by the user.
</div>
Something like that
<div select="true">
<div option="true"></div>
<div option="true"></div>
<div option="true"></div>
</div>
Is there a an easy way to achieve it without using js?
If you just have a normal select with some options but don't have a name attribute the selected option will not be submitted:
<select>
<option>a</option>
<option>b</option>
</select>
So the select can be contained within, and formatted as part of, the form element with no problem,
If you have a name attribute but with an empty name string then it seems browsers will submit the value but with nothing before the =
I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})
Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.
In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.
You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.
$('.ui.dropdown').dropdown({
clearable: true
});
My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.
I'm using Bootstrap 3 and HTML5 to create a web form. There's a section of the form where the user can select his "Method of delivery" via a drop-down box. The values are: Shop Pick-Up, FedEx, and Null. If the user selects FedEx, he shall then enter in his mailing address in the textarea titled "Shipping Address". However, since we do not need his mailing address if he selects "Shop Pick-Up" or "Null", is there a way to mute or grey-out the text box and only have it be writable if he selects "FedEx"?
Looking for ideas on how to approach this scenario.
My HTML:
<div class="col-xs-3">
<div class="form-group">
<label for="delivery">Method of delivery</label>
<select id="delivery" name="delivery" class="form-control input-lg" tabindex="17">
<option value="options" selected disabled>-Select-</option>
<option value="Shop Pick-Up">Shop Pick-Up</option>
<option value="FedEx">FedEx</option>
<option value="null">Null</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="shippingAddress">Shipping Address</label>
<textarea name="shippingAddress" class="form-control" rows="7" placeholder="" tabindex="18"></textarea>
</div>
You have a few options for dealing with non-required fields. The simplest option would be to add the attribute disabled to the textarea if they choose fedEx.
http://jsfiddle.net/dy4r3/
Your other option is to hide the non-required fields using $.fn.hide() and $.fn.show()
http://jsfiddle.net/ANKXA/
You can obviously expand on these solutions to make them a bit more elegant, but this should get you in the right direction.
You can use the change event and update the text box based on the selected value.
$('#delivery').on('change', function(e){
if($(this).val() == 'FedEx')
$('#shippingAddress').prop('disabled', false);
else
$('#shippingAddress').prop('disabled', true);
});
Give the shippingAddress element an id (it should have one for the label for)
Then you can set the disabled attribute when the select box changes
$('#delivery').change(function(){
$('#shippingAddress').prop('disabled', !($(this).val() == "FedEx"));
});
The disabled property of textarea can help you here.
Fiddle Demo
But showing and hiding would be better.
But there showing and hiding will make your form shake so apply some animation to avoid that or go with this approch but this approch also has some flaws as the user is nt directly clear when he will be allowed to enter the address.
I prefer going by show and hide as it is easy and informative.
Here is demo with show and hide
First of all sorry if my title doesn't quite explain my problem. I have a form which is create a set of question dynamically. In the code below I use ng-repeat="opt in q.options" and I have a button which add a new option.
My view code
<div>
<label for="">Options: </label>
<a ng-click="addOption($event, $index)">
<i class="icon-plus-sign icon-large"></i> Add option
</a><br /><br />
<div ng-repeat="opt in q.options">
<label><span>{{opt.id}}.</span></label>
<input type="text" ng-model="opt.text" placeholder="Add new possible answer here.">
<a ng-click="q.options.splice($index,1)"><i class="icon-remove-sign icon-large"></i></a>
</div>
</div>
<div>
<label for="required_credit">Answer: </label>
<select id="city" ng-options="c for c in options">
</select>
<!-- <ul>
<li ng-repeat="opt in q.options">{{opt.id}}</li>
</ul> -->
What I want is to reuse q.options in my select tags but it the problem is it doesn't populate. I've used ul li tags then ng-repeat="q.options" and it worked but I want to use it using the select tags.
PS: The reason why I want to use the same model is to simply get the appended data which I inserted dynamically.
For instance:
I have 2 input buttons and I add a new input button
Since I'm using the same model my select option would then be updated then it would have 3 options as well.
Accordingly the ngSelect documentation, ng-model is a required parameter for ngSelect. I believe, you want to store your selected value somewhere ;)