As far as I can tell there isn't, but I figured I'd ask.
I have a text input. Autocomplete suggestions are fetched dynamically as you type and fill a datalist attached to the input. Normally, typing something and pressing the "search" button brings up a table of search results to select from.
Since the datalist is basically the exact same thing, but simplified, and selecting an option from it is unambiguous, I'd like it to just carry on with my selection handlers without having to bring up the list for selection a second time. When the person manually types something though, I still want them to explicitly pick from the list, especially since some options may be substrings of the others, so I don't want it to auto-select a result for you if it matches halfway through.
I ended up not reimplementing it like ControlAltDel suggested in his comment and instead went with the following slightly hacky but functional solution:
Since I am refetching the search results as you type, if only 1 search result is returned (ie. it's unambiguous) and the current string is a case-insensitive exact match to that result, then select it. It works well for what I need it for, but I could imagine this not working for everyone.
The JS is roughly as follows:
if (searchResults.length === 1
&& searchString.toLowerCase() === searchResults[0].toLowerCase()
) {
selectResult(searchResults[0]);
}
I'm calling this in my handler for when the search results list changes, not the input's handler, since the results are only re-fetched after the input has already been changed.
I have a tablesorter, with 2 filter Columns. The first Filter works as a drop down and has no issues right now. The second filter is intended to be a full table search and filter mechanism.
That is to say, even though it is associated with the computer column, it should return results for child rows as well
The Computer Filter should respond to all child rows. For instance, if I searched for z840, , only Computers with Model z840 should appear.
However, I have a custom secondary filter mechanism by request The gauge at the top, works as a filter for workgroup
However, If I am filtered in a workgroup, and use the Computer Filter, it ignores the custom hidden rows, and searches against any row in the table. (Child Row Searching works fine).
My Question is, Is there a way to overwrite the functionality of the filter, to ignore any rows that are already satisfying some condition IE: $(row).hasClass('hide')
I have tried using filter_functions but every result ends up searching on computer name only
I am using Jinja Templating so it was a little hard to get a fiddle up and running but here is a sample.
http://jsfiddle.net/brianz820/856bzzeL/813/
Sort by wg02 (at top, no results), and then use the computer filter to search for say, 3.3. No results show up, but once you delete the search, the original workgroup filter is removed.
On my production copy, even typing 3.3 would have returned results for any workgroup, ignoring the filter.
There may be lots of extraneous code on Fiddle, just wanted to get a working version up
Thanks for reading, Goal to maintain free form child searching and filtering on filter selection, but maintain external hidden rows.
if there is any more required information please let me know
I'm not exactly sure if this is what you meant, but the hideRows function can be simplified by using the filter widget (demo):
function hideRows() {
var $table = $('.tablesorter'),
filters = $.tablesorter.getFilters( $table );
filters[2] = selected === 'All' ? '' : selected;
$.tablesorter.setFilters( $table, filters );
}
I have implemented jquery auto suggestions in my application which has a bunch of cities in it. The problem is it showing every strings which has the entered query. if i type how it shows all the strings which has 'how' in it in between..
The following is the list of results i get if i type how but i prefer to get it in a different order which i descrided and i don't want to show other results. I dont want to show other results.
Bhowra Bh
Chalk howa <--------------------------------This should come third
Chowka Ghat
Chowrigacha
Howbagh Jabalpur <--------------------------This should come first
Howrah <------------------------------------This should come second
Khowang
Ladhowal
Majhowalia
MHOW
Mhow
Mount Howrah <------------------------------This should come fourth
Pehowa Road
Pipalwali Chowki
Saheed Ishwar Chowdhary H
how do is make this work. here is the code i use.. or is there any other way to achieve this in javascript without jquery..?
$(".selector").autocomplete(/*parameters*/);
NOTE: I use an array to store the city names and use them as source for auto complete. And i don't use AJAX
You can use a callback to do the filtering and sorting yourself.
$(".selector").autocomplete(
source: function(request, response) {
// filter parameters based on request.term
response(/*params*/, request.term);
}
);
It's also possible to alter the search term at that point, but that wouldn't work in this case.
I have a pretty big array of JSON objects (its a music library with properties like artist, album etc, feeding a jqgrid with loadonce=true) and I want to implement lucene-like (google-like) query through whole set - but locally, i.e. in the browser, without communication with web server. Are there any javascript frameworks that will help me?
Go through your records, to create a one time index by combining all search
able fields in a single string field called index.
Store these indexed records in an Array.
Partition the Array on index .. like all a's in one array and so on.
Use the javascript function indexOf() against the index to match the query entered by the user and find records from the partitioned Array.
That was the easy part but, it will support all simple queries in a very efficient manner because the index does not have to be re-created for every query and indexOf operation is very efficient. I have used it for searching up to 2000 records. I used a pre-sorted Array. Actually, that's how Gmail and yahoo mail work. They store your contacts on browser in a pre-sorted array with an index that allows you to see the contact names as you type.
This also gives you a base to build on. Now you can write an advanced query parsing logic on top of it. For example, to support a few simple conditional keywords like - AND OR NOT, will take about 20-30 lines of custom JavaScript code. Or you can find a JS library that will do the parsing for you the way Lucene does.
For a reference implementation of above logic, take a look at how ZmContactList.js sorts and searches the contacts for autocomplete.
You might want to check FullProof, it does exactly that:
https://github.com/reyesr/fullproof
Have you tried CouchDB?
Edit:
How about something along these lines (also see http://jsfiddle.net/7tV3A/1/):
var filtered_collection = [];
var query = 'foo';
$.each(collection, function(i,e){
$.each(e, function(ii, el){
if (el == query) {
filtered_collection.push(e);
}
});
});
The (el == query) part of course could/should be modified to allow more flexible search patterns than exact match.
I'm using Jorn Zaefferer's Autocomplete plugin on a couple of different pages. In both instances, the order of displayed strings is a little bit messed up.
Example 1: array of strings: basically they are in alphabetical order except for General Knowledge which has been pushed to the top:
General Knowledge,Art and Design,Business Studies,Citizenship,Design and Technology,English,Geography,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else
Displayed strings:
General Knowledge,Geography,Art and Design,Business Studies,Citizenship,Design and Technology,English,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else
Note that Geography has been pushed to be the second item, after General Knowledge. The rest are all fine.
Example 2: array of strings: as above but with Cross-curricular instead of General Knowledge.
Cross-curricular,Art and Design,Business Studies,Citizenship,Design and Technology,English,Geography,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else
Displayed strings:
Cross-curricular,Citizenship,Art and Design,Business Studies,Design and Technology,English,Geography,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else
Here, Citizenship has been pushed to the number 2 position.
I've experimented a little, and it seems like there's a bug saying "put things that start with the same letter as the first item after the first item and leave the rest alone". Kind of mystifying. I've tried a bit of debugging by triggering alerts inside the autocomplete plugin code but everywhere i can see, it's using the correct order. it seems to be just when its rendered out that it goes wrong.
Any ideas anyone?
max
EDIT - reply to Clint
Thanks for pointing me at the relevant bit of code btw. To make diagnosis simpler i changed the array of values to ["carrot", "apple", "cherry"], which autocomplete re-orders to ["carrot", "cherry", "apple"].
Here's the array that it generates for stMatchSets:
stMatchSets = ({'':[#1={value:"carrot", data:["carrot"], result:"carrot"}, #3={value:"apple", data:["apple"], result:"apple"}, #2={value:"cherry", data:["cherry"], result:"cherry"}], c:[#1#, #2#], a:[#3#]})
So, it's collecting the first letters together into a map, which makes sense as a first-pass matching strategy. What i'd like it to do though, is to use the given array of values, rather than the map, when it comes to populating the displayed list. I can't quite get my head around what's going on with the cache inside the guts of the code (i'm not very experienced with javascript).
SOLVED - i fixed this by hacking the javascript in the plugin.
On line 549 (or 565) we return a variable csub which is an object holding the matching data. Before it's returned, I reorder this so that the order matches the original array of value we were given, ie that we used to build the index in the first place, which i had put into another variable:
csub = csub.sort(function(a,b){ return originalData.indexOf(a.value) > originalData.indexOf(b.value); })
hacky but it works. Personally i think that this behaviour (possibly coded more cleanly) should be the default behaviour of the plugin: ie, the order of results should match the original passed array of possible values. That way the user can sort their array alphabetically if they want (which is trivial) to get the results in alphabetical order, or they can preserve their own 'custom' order.
What I did instead of your solution was to add
if (!q && data[q]){return data[q];}
just above
var csub = [];
found in line ~535.
What this does, if I understood correctly, is to fetch the cached data for when the input is empty, specified in line ~472: stMatchSets[""] = []. Assuming that the cached data for when the input is empty are the first data you provided to begin with, then its all good.
I'm not sure about this autocomplete plugin in particular, but are you sure it's not just trying to give you the best match possible? My autocomplete plugin does some heuristics and does reordering of that nature.
Which brings me to my other answer: there are a million jQuery autocomplete plugins out there. If this one doesn't satisfy you, I'm sure there is another that will.
edit:
In fact, I'm completely certain that's what it's doing. Take a look around line 474:
// loop through the array and create a lookup structure
for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
/* some code */
var firstChar = value.charAt(0).toLowerCase();
// if no lookup array for this character exists, look it up now
if( !stMatchSets[firstChar] )
and so on. So, it's a feature.