add id to select2 input text - javascript

is it possible to add an id to the input type text that select2 is generating? to explain what i want, i have to make a filter based on cities, since there are too many cities, i cant load them all at once, so i made an autocomplete, but the user can choose more cities, so i thought about an autocomplete with select2, i tried using the class, like this
$('.select2-search__field').on('keyup', function(e) {
console.log($(this).val());
});
The problem is, i have more select2 on my page (one with some codes, one with some regions etc.), and i would do useless ajax requests for each of them

Let's think outside the box. You might not have to put an ID on a Select2 instance.
You need to somehow differentiate between different instances of Select2. Maybe an easier approach, which you're already familiar with, would be to wrap them in a div which has an ID:
<div id=first>
<!-- one select2 -->
</div>
<div id=second>
<!-- the other select2-->
</div>
You can now access different ones based on the ID of the wrapper.
$('#first .select2-search__field')

Related

Making select box searchable html

I am dynamically adding select elements in the webpage when a certain action is taken by the user. The problem is that as the select elements are added dynamically, the jquery is unable to make them searchable as it is applied when the document is loaded. How can I make the dynamically added select boxes searchable?
EDIT
I'm using select bootstrap for making the select element searchable.
What I am doing is making the user select multiple parts of an image using select areas and whenever an area is selected, I add a select element corresponding to that area. This is done using a custom javascript in the head of the page. However, these select elements are devoid of any styling as the are added dynamically.
The select bootstrap can make a select element searchable by using data-live-search -
<select data-live-search="true" name="category_name" class="selectpicker" >
You can use a plugin like Chosen. It is very easy to use, just include the files and call it like this:
$(".my-select").chosen();
And if you want to add options dynamically, you can take a look at this answer, which explains how to do it.
You can search for the elements with a selector, even if you bind them dynamically:
$('option').each(function(){console.log($(this).html())});
$('select').append('<option class="option2">test 2</option>');
$('option').each(function(){console.log($(this).html())});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option class="option1">test</option>
</select>

Testing combobox developed using ExtJS with CasperJS

I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');

Append to typeahead

Is it possible to append some HTML to the end of a typeahead? I've tried many different things but none have worked.
What I'm trying to do is have the last result of the typeahead be Search for "< what the user typed into the input >".
Here's what I've tried on JSFiddle: http://jsfiddle.net/MgcDU/8621/
What I expected it to do was append the <li> at the end of the dropdown once it's created, but it doesn't. Why?
HTML:
<input type="text" data-source="["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]" data-items="10" data-provide="typeahead" style="margin: 0 auto;" class="span3">
jQuery:
$(".typeahead.dropdown-menu").append('<li data-value="Custom" class="">CUSTOM TEXT</li>');
The dropdown menu is built during the typeahead filtering process. If you inspect it "on load", you will notice it is empty.
Depending on your specific problem you're trying to solve, i can think of two possible solutions.
One solution would be to extend the typeahead plugin and provide a custom "render" function. This would allow you to modify the list rendering process and append additional <li>s as well as anything else you like. This is probably regarded as the "best way".
Another more hacky solution would be to place your custom value in the data source, then provide a custom "matcher" function which runs the original matcher along with an additional clause for your custom value.
Of course solutions are tied to problems and without really knowing the very specifics of what you want to do, i can't recommend which one to use. But those are your two options as far as i can think.

How can i get Knockout to generate new HTML that has bindings

I have created a form with knockout that will allow the ability to give a product dynamic attributes: (i.e. size - small, med, lg). This is generated by input field and a multi select drop down.
When the fields have been filled out and the selection list which is the attribute values has been generated, I can add them to an observable attribute array.
The problem I can't see is I need to display these attributes and their array of values, but I also need them to be editable. I wasn't so keen on the idea of them be reloaded into the main form where it was created - but maybe that is the best way.
Maybe just listing the attributes as uneditable list of attributes
example:
Name: <span data-bind="text: attributeName"></span> <select height="5" data-bind="options: attributesValues"> <button data-bind="click: edit">Edit</button>
And if they click edit it loads it into the form that they created it from so it can be edited.
However, I wanted to see if there is a way to do inline editing and bind to the added Attributes and each of their array of attributeValues. So when they remove an attributeValue from the list, it would remove it from the array of that particular attribute.
Any thoughts?
So, I am not too confident I understood exactly what you are trying to do, and the one line of code you posted didn't really clarify it. I threw this fiddle together that has a multi-select for attributes, and lets you add new products with the select attributes. Once added, the new product has those attributes as select's of there own, which can still be edited. If this isn't what you are after, please try to clarify, and maybe post some more code.
Here is the fiddle

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax

Categories

Resources