I'm having an array with possible values that I would like jQuery to autocomplete from. This array is very big. It has more than 1000 records inside. I'm using jQuery so I can be auto-completing from these possible values but it's taking so long that the page eventually crashes.
This is my jQuery snippet:
jQuery(function(){
jQuery(".postal-code-autocomplete").autocomplete({
source: postal_codes,
delay: 0
});
});
Any suggestion for optimization ?
EDIT: I made it work with minLength:3 but something weird happens. When I enter all 5 digits and it finds the value, it makes a drop down list with multiple rows and only one record, the one I chose. how can I avoid this?
Thank you!
You need to use the Remote option detailed in the documentation;
http://jqueryui.com/autocomplete/#remote
Loading many values at once will obviously lock-up the browser, using the remote option will allow only loading a filtered sub-set of the data, based on what the user has typed
Related
I use Select2 as an auto suggest. That means, I fetch options from a remote source via ajax. This works perfectly.
Now, the customer wants to have all options loaded before he starts typing. That kind of defeats the purpose of an auto suggest, but if he wants it that way, he shall have it.
Anyways, I would need to display the first 50 or 100 elements before the user starts typing and after the third typed character the Select2 input should fetch the options again.
I tried prepopulating the select with option values (for example "aa","bb" and "cc"), but it only displays the placeholder. Is it possible to send a request as soon as the user clicks on the select? That would be a possibility too, since the remote source could send back the first 50 results. If anyone could steer me in the right direction, I would be thankful :)
A quick workaround if anyone will have the same issue:
set the "minimumInputLength" to 0. This way a request will be sent as soon as the user opens the Select2 input element. The search parameter will of course be an empty string.
in the "processResults" function add a logic to allow pagination. The returned object needs a "pagination" property with a boolean member called "loadMore". You can read more about that here: https://stackoverflow.com/a/29022107/430997
This way you just enabled infinite scrolling. Of course you need support for paginated results on the serverside too.
Optionally you can fetch sources from different locations. The "url" parameter of the ajax option can be a function. If you want to call different endpoints based on the number of characters (mostly to check, if the number of characters is 0), you can check for it inside the url function and return the appropriate endpoint.
This is just a workaround and only simulates initial values. If anyone has a real answer to my question, please post it :)
Hi I'm writing a web app using rails and as part of it I am displaying data to the user using jQuery Bootgrid. As part of this the user is able to set the number of rows per page of the table. I'd like to be able to have this setting persist between page loads.
When a user chooses an option for the number of rows to display I am able to capture that and store in a model. However Bootgrid doesn't seem to have a simple way of programmatically setting the number of rows. This seems like a common thing to want to do so if anyone has come across this before and can give some help it would be greatly appropriated.
you can find a "setRowCount" implemented in
https://github.com/rstaib/jquery-bootgrid/issues/215 - jquery.bootgrid.modified.txt
Unfortunately the user didn't see fit to properly fork the repo.
Not my best code but it is working:
With jquery fire click event of number of rows that you want...
$("#grid-basic1-header .dropdown:visible [data-action='-1']").click();
I have a PHP application where a list of people is displayed in a select box. With time this list is now more than 100,000 long and the screen takes about 20-25 seconds to load. Is there any way I can cut down on this time? Tried loading the names via ajax, but the performance is same or worse. This also needs to be the first item selected on screen, as the rest of the items are dependent on it.
You could use ajax as you already tried, but instead of displaying all names, you could do something like autocomplete, which will display matching names when users start typing.
Example in jQuery: http://jqueryui.com/autocomplete/
Can u use jScroll?
you can just implement in your select dropdown, by replacing the contents to your list items.
Or you can see this.. jsfiddle
ember.js
I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.
I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)