In a form I have thousands of records to update and in each record I have a select box(each select box have 20-30 options) so there are total thousand of select boxes. When I apply Select2 on these all select boxes using same class Its freeze my browser. If I don't use select2 then it works fine.
To reproduce this issue:-
create multiple single select boxes (may be 4000) and you can keep 2-3 options in each select box
now run this in browser(It will work fine without freezing the browser)
Now apply select2 on all select box(It will freeze the browser)
Thanks
I have tried another jQuery plugin also but all have same issue because if we use thousands of select dropdown boxes then its take too much to initialize for all select boxes thats why its freeze the browser.
For this I have initialize select2 either on mouseover(can apply on click also) of the select box so it will not init on load but load for the select boxes we need to apply when we mouseover.
$(document).on('mouseover', 'select', function() {
$(this).select2().select2('open');
});
Related
I'm using a select2 ajax based dropdown with a single select. This is working perfectly.
There is another input field also on the page and when this is interacted with, I would like to preload the select with a certain amount of options - say 4.
I am using the below to insert the options dynamically, but this is only presenting 1 selected option and when I click the dropdown I get the "please enter x characters" message and don't see what I've preloaded. Is this something that can be achieved?
var newOption = new Option(data.text, data.id, true, true);
$('#selectid').append(newOption).trigger('change');
Thanks,
David
This should have been pretty straight-forward, but none of the solutions in StackOverflow doesn't seem to work for me...
Using jQuery 2.1.0, I've set up an autocomplete using an Ajax source, autoFocus: true, and a select: function (event, ui) { ... } to provide me with key/value pair combinations.
As soon as I start typing in the input field, I get the correct options as a DDL, which I can then select using the mouse.
However, I would now like to programmatically trigger the autocomplete search, and then SELECT the first option (if available).
I trigger the search like this:
Preparer.autocomplete('search', LoginName);
The available choices show up correctly, but I can't seem to be able to select the first one programmatically!
I tried calling .select(), I've tried triggering keypress 13 and 9 within the control, and even tried performing the actions within a setTimeout function to make sure that the dialog was rendered correctly!
I even tried setting the option { selectFirst: true }, but still nothing...
Is there something else I could try??
As in the comment above:
You can trigger a click on the first menu item:
$("#autocomplete-id").data("ui-autocomplete").menu.element.children().first().click()
Keep in mind: Triggering a select will also close the menu, which seems counterintuitive. It'd be better to intercept the data in source and trigger your custom callback there, and not bother with select at all.
Search
$('#autocomplete-id').data("uiAutocomplete").search($("#autocomplete-id").val());
&
Select
var results = $("#autocomplete-id").data("ui-autocomplete").menu.element.children()
.first().click()
I have a select option list and im using jQuery Mobile. My list is very long so Id like to give users the option of searching the list by typing in text.
Is there some native / jQuery Mobile way of adding a text search when you focus on the list? If not I guess instead on an input ill need to create a link to a new page with a filter list, and use javascript to populate the 'input' with the value selected.
http://jquerymobile.com/test/docs/lists/lists-search.html
The short answer is no, unless you want to go nuts editing the JQM code to add that feature to the select box. That being said, I also had this problem (with the select menus being way too long), and here's what I did:
For one scenario, I used an autocomplete search box (that had results drop down: http://jqueryui.com/demos/autocomplete/) in addition to the select menu, populated with the data in the select menu. That way the user could choose whether to use the select menu or search.
For a second scenario, I allowed the user to search for something, then brought up a menu (really a dialog plugin) with only the results that matched what they searched for.
Hope this helps.
Personally, I could not get the jqueryui autocomplete to work well with jQuery Mobile. But this autocomplete code from Andy Matthews worked well:
http://www.andymatthews.net/code/autocomplete/
Used in conjection with an input text field, it provides a way for users to type in a few characters and see a list of choices to select.
I am fairly new to JQuery and Javascript...
Currently I am using the following technique or code to populate input boxes from a JQuery UI autocomplete set of search results...
var PopulateFields = function(event, ui){
$('#Custid').val(ui.item.Custid);
$('#Alpha1').val(ui.item.Alpha1);
$('#Alpha2').val(ui.item.Alpha2);
$('#CustName').val(ui.item.CustName);
$('#Address1').val(ui.item.Address1);
$('#Address2').val(ui.item.Address2);
$('#City').val(ui.item.City);
$('#State').val(ui.item.State);
}
$( "#search-by-custname" ).autocomplete({
source: "cust_search_by_name.php",
minLength: 4,
select: PopulateFields
});
The php script is grabbing the info from a database and squirting it back via JSON in the following format:
[{"label":"A Tire Store","value":"A Tire Store","Custid":"10000","Alpha1":"COD123456","Alpha2":"TIRE","CustName":"A Tire Store","Address1":"123 Cherry Lane","Address2":"","City":"City of Bla","State":"FL","Zip":"555555"}]
This works wonderfully with input boxes.
However, if I wanted to make State a select box, how would I populate that Select box with the existing value in the customer record?
Or, is that impossible?
I am trying to create a data entry form, and one of the features I want to have is when they search for a customer record to edit, that their search will populate all fields on the form and then they can edit them.
I thought a select box for State would save me some data validation logic...
My other thought was to use a read only input box for the State (because I know JQuery UI autocomplete will populate that), and then create a "State Selector" Select box that would populate the read only input "State" box for re-submission.
Thoughts?
Are you saying you've tried this and it's failed? Because if you have a select similar to
<select id="State">
<option>AK</option>
<option>FL</option>
<option>WY</option>
</select>
then calling $("#State").val("FL") will work.
All,
BACKGROUND: I have a collection_select statement that displays a dropdown box.
OBJECTIVE: I'd like the dropdown to be an image that the user clicks to see the collection rather than the default box + down arrow that appears.
You need something like this plugin for jQuery. It allows you to replace a normal select with a custom one based on your wants. You would have to write your own select helper since you need to add the attributes to the select options that this plugin requires. If you get started and need help, post back here with what you're stuck on.