documentcloud / visualsearch

A Rich Search Box for Real Data

This is the repository for the legacy DocumentCloud site, please see the current repository here:

https://github.com/muckrock/documentcloud

______                                      _   _____ _                 _
|  _  \                                    | | /  __ \ |               | |
| | | |___   ___ _   _ _ __ ___   ___ _ __ | |_| /  \/ | ___  _   _  __| |
| | | / _ \ / __| | | | '_ ` _ \ / _ \ '_ \| __| |   | |/ _ \| | | |/ _` |
| |/ / (_) | (__| |_| | | | | | |  __/ | | | |_| \__/\ | (_) | |_| | (_| |
|___/ \___/ \___|\__,_|_| |_| |_|\___|_| |_|\__|\____/_|\___/ \__,_|\__,_|

DocumentCloud is a catalog of primary source documents and a tool for annotating, organizing and publishing them on the web. Documents are contributed by journalists, researchers and archivists.

This codebase contains the entirety of DocumentCloud.org, and pulls together the rest of our open-source projects: Docsplit is used to extract data from incoming documents; that work is parallelized across CloudCrowd; data on the client-side is modeled by Backbone.js, which depends on Underscore.js for all of its abilities; Jammit concatenates and compresses the dozens of CSS and JS files into a single asset package; the NYTimes' Document Viewer displays the documents, while Pixel Ping records the traffic.

If you find a security issue while browsing the source, please email [email protected] to inform us of the problem.

Code contributed to this project is provided under the MIT license (see the LICENSE file). Some components of the project are subject to their own licenses as indicated (see /vendor and /public/javascripts/vendor directories).

visualsearch's Issues

Suggested feature: cutting / copying text

One thing DocumentCloud has lost with visual search is the ability to cut or copy a search term. I can paste search terms from elsewhere, but I can't copy the current search terms. to paste elsewhere. The workaround is to copy from the URL but it would be nice if I could copy from the search box.

Focus search box with jQuery

Have tried with VS.app.searchBox.focusSearch(e) but obviously that requires an event. Tried faking the event but no such luck.

Doesn't seem possible to focus the search box with jQuery?

group headers in 'showFacets: true' drop down

On the Demo there is a "Location" separator in the drop-down from having showFacets: true set. I can't see in the code where this is located. How do you add these non-selectable group headers?

VisualSearch can't parse/round-trip categories with a space

What it says on the tin: it's possible to create (programmatically mostly) and serialize queries where categories contain spaces (the serialization correctly quotes the category name), but the query parser breaks down and blows up the category into a "text" facet for headings and the last word of the actual category used as a category with the corresponding value.

See http://jsfiddle.net/kc4mQ/ for a demonstration: the search is loaded (via VS#searchQuery.reset) with two facets having spaces in their categories, if the VisualSearch is selected and [Return] is pressed (to perform a search) the search gets completely broken.

Tag 0.3 version release

Could you tag the latest version 0.3?

Thank you,

Pavel

Support permalinks / browser history (via routers)

Been trying to get VisualSearch to update the URL bar when a search is entered, and to execute a search based on the current url, but I'm new to backbone and can't figure it out. Any suggestions on how to do this?

allow external code to produce facet events

I love VisualSearch.js!

I also have interactive facet widgets like checkboxes etc. I would be awesome if I could somehow create events into VisualSearch search box. E.g. if a facet is selected via the checkbox, it also gets applied in the search box etc.

Support jQuery 1.4

A lot of current-generation CMSes use jQuery 1.4 and are incompatible with jQuery 1.6, how much effort would it be to backport it to jQuery 1.4? Thanks.

How can I allow one facet for once in a search?

How can we setup visuablsearch to allow one facet to be selected only once ?

e.g on example at http://documentcloud.github.com/visualsearch/

If I have selected "Country" once in a search box, the country facet should not be shown again ?

I tried to look for some documentation, but didn't get lucky.

Thanks,
Chetan.

Clearing down search causes Input text to be hidden from 1st char & 1/2 second char (Mac OS - Chrome)

When you clear all the searches down, the input text is hidden from the first character and half of the second one.

Unicode characters issue

In example provided: when I try to customize facet label and put a string in Armenian it doesn’t work e.g. when I type in search box first latter 'տ' it doesn't show me facet. I also tried Russian characters with same result.

Code example:

...
facetMatches : function(callback) {
    callback([
        'account', 'filter', 'access', 'тип','տեսակ',
        { label: 'city',    category: 'location' },
...

But when I try to inspect code like this:

visualSearch.searchBox.value('տեսակ:type')

it gives me right result, e.g. showing the facet.

Tested in latest Chrome, FF.

Functionality shouldn't restrict user to char limit / Options should be shown upfront on focus

Expected text box to allow standard input; or if the user is to be restricted to first specifying the search type, the user should be given a full list of options on first click of the textbox or focus to make this more obvious.

Inspecting VisualSearch's facets (was: This is not an issue!)

Sorry to use this but there is not other way I could reach you guys.
This is really a help thing than an issue.
I'm a junior JS developer and I love this product, but as a junior developer I'm having a hard time tryin' to retrieve the search query as an structured object. If someone could please give me an example to retrieve the value of a category via this structured object would be great!

I know this is well documented but even tho I'm having a hard time.
Thanks for your help in advanced!

default facet/category

I'd need to modify the default facet name that queries default to when none has been specified.

Right now everything defaults to 'text' but I'd like it to be something else like 'music' or 'videos'.

Is there any way to achieve or do I need to modify the base visualsearch.js file?

autosearch: false doesn't work

Hello

if option 'autosearch' is set in false, search callback is not called on change event, but backspace stil call the search function.
How to fix that?

paste into the search field caues UI bug

You can try this on http://documentcloud.github.com/visualsearch
Go to the demo and the paste a search string into the textfield. Only the last character is then shown in the search box. Sometimes when you click outside the textfield (it looses focus), the display resets and the full text is shown.

submit button

Due to architecture of my website, i need to user visual search with submit button instead of autosubmit.

is that possible? thank you.

VisualSearch has a dependency on (parts of) jquery-ui's JS but is not compatible with jquery ui's CSS

http://jsfiddle.net/GGYCg/1/ is the basic usage of VisualSearch with jquery-ui's JS. No problem, when searching for e.g. "Account" the completion list displays nicely.

http://jsfiddle.net/GGYCg/1/ is the same but uses a jquery-ui CSS theme as well (smoothness). Trying the same thing as previously yields a very different situation: the completion list is now "jagged" and the corners of the items have lost their crispiness.

Display Label instead of Value in the box

Currently label is shown in the menu and value is shown in the box (once something is selected).

It'd great to have the option to display the label instead (to increase the user friendliness). The value should also be retained in the model as that can be used for creating queries.

iphone cursor

tapping into seach box doesn't work on iphone safari well.
it seems that hidden input box is too small ..
taping few pixels on the right side of search icon will position cursor properly.

Changing a Facet's Value Causes Firefox 13 Component Failure

I've been testing some functionality in FF13, and have noticed an issue when changing a facet's value to one of its valueMatches.

Replication:
This error can be replicated on the VisualSearch demo page, as well. Simply open up Firebug or something similar, and change the value of one of the auto-completed facets. You'll be greeted with a lovely error message:

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.setSelectionRange]
[Break On This Error]   

this.setSelectionRange(start, end);

Analysis/Research:
I've determined that the cause of this particular error occurs in the "selectRange" function extended onto jQuery, and is caused by focus being placed on an input element that is hidden:

this.focus();
this.setSelectionRange(start, end);

Further investigation proves that this is the issue: guarding the selectRange() function with $(this).is(":visible") removes the error.

Auto Search on SearchBox.setQuery

Hi,

I can't find a way to programmatically execute a search after setting the searchBox query.
For instance I display a search screen with a restored search query and i'd like to see the result immediately without to have to press return within the search box.

Is this a feature eligible to Pull Requests or something that I miss ?

Thanks in advance

Cmd-C erases all selected text

If I type Cmd-A to select all, each component gets highlighted as if it's selected. If I then press Cmd-C, as if to copy, the text is instead erased (and it isn't copied :)). Cmd-X does the same thing, and also doesn't cut (copy).

visualsearch with knockoutjs

I work with knockoutjs in my project. I have an observablearray in my viewmodel and I want to add it to facets. How can I do?

Broken TAB navigation (accessibility issue)

TAB keystrokes are captured by the input field to cycle between search facets, which results in keyboard users (i.e. no mouse / touch pointing device) not being able to leave the search field once it gets keyboard focus.

Behaviour observed with Chrome, using this demo page:

http://documentcloud.github.com/visualsearch/

Placeholder and unquotable

Hi,

Thanks for this very useful component. I have a question, what unquotable is it for? Does there is a way to have a placeholder on the searchbox?

Thank in advance

Allow Multi-select in dropdowns

I have a requirement to select multiple values for States and it would be great to allow multi-select in the dropdown values and show them like this:

Alabama, California, Missouri

Tab Completion Maintains Previous Text Input

Context: Fresh deploy of visual search with example facets and completion terms.

Scenario:

1. Tab complete "country" facet,
2. Type in USA,
3. Tab again to move to the next input fragment
4. Backspace, Delete USA up until country facet
5. Tab 2 times, USA comes back

It seems like the "USA" term is being temporarily stored and reconstituted on double tab after deletion. Shouldn't the behavior be more along the lines if you just typed country and tabbed twice, no term is inserted, and you move to the next facet fragment? Maybe this behavior would be different if country had a set of canned countries to choose from, and tabbing through would chose your last selected or top term in that list? For facets that don't have a preset list of values to choose from, tab completing on an ephemeral, user defined term that was just deleted seems counter-intuitive (to me at least)... thoughts?

p.s. I want to contribute so let me know if this behavior is by design or to the contrary, I can work on this

Suggested feature: date search values

I'm planning to use visualsearch in an electronic medical record system and would very much appreciate a way to provide date search values, preferably with a datepicker, or perhaps with independent autosuggests for year, month and date? Anything like this in the cards? Otherwise I'll take a stab at implementing it myself.

show facets onclick?

This post can be found also here http://stackoverflow.com/questions/9432478/visualsearch-js-how-to-show-facets-onclick

A feature which, according to my users feedback, is realy missing, is the possiblity to know, somehow, which are the available facets. My facets are many and it would be really nice to have a list of facets (maybe grouped) when clicking on the searchbox.

I had a look on the annotated source code, in particular to search_parser.js and to search_box.js.

I suppose that I've to trigger the click event on the element with VS-search-inner id. Or maybe another way would be to work on the parse function... I'm a little bit confused.

I also noticed the showFacetCategoryMenu which, unused at the moment, might implement the feature I'm searching for if modifyed.

So, in conclusion, my question are:

can anybody put me in the right direction?
which would be the right place to put my hands on, in order to implement the "show available facets" function?

clearing search box should trigger search callback

Currently, each time a facet is deleted, the search callback is triggered. Using the "X" to clear all facets should also fire the search callback.

add a value option to the facets

right now you can set the value of a 'value' like so:

{ value: '1-amanda', label: 'Amanda' }

it would be nice, if the same was possible for the facets, like:

{ label: 'address', value: 'Adresse', category: 'location' }

the main reason of this would be localisation

Operator on facet values?

Is there a way to allow operators to be included for searching on facet values?

For instance, the facet may be activity date and the value may be a date. However, you want to search with the operator < or > so that you can get a list of activities that are before or after the inputted date.

iOS Safari - SearchBox is NOT editable/focusable

Sample: http://documentcloud.github.com/visualsearch/
Device: iOS devices iPhone/iPad even or iOS emulators
Issue: Could not focus on the field, the keyboard is not popping up. But when I click the clear/close button of the searchbox the field becomes editable.

Is it a known issue and not supported or not documented?

It would be nice if the bugs been fixed before adding new features.

Add an option to mimic the `placeholder` attribute

I think the title is enough.

The placeholder attribute on the W3C

backspace does a browser "back" on some browsers

On IE9, I am on the Sarah Palin example page, and I hold backspace, which deletes some things and then does a bunch of back buttons.

On Opera, on the Sarah Palin example page, I press backspace and it only deletes the values (like 2007) and not the attributes (like YEAR). If I press it again, it will do a browser back.

The focus is always in the textbox.

The Sarah Palin example page: https://www.documentcloud.org/public/#search/group%3A%20nytimes%20palin%20filter%3A%20annotated%20year%3A%20%222007%22

Exception when removing a facet that is currently being edited.

FF11.

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.setSelectionRange]

To reproduce:

1. Add some text, hit enter.
2. Backspace through about half of the text, but don't complete the edit.
3. Hit the X to remove the text section.

Expected result:
The text facet should have been removed.

Actual result:
An exception is thrown and the facet is not removed.

(Hitting the X a second time DOES remove the facet as expected.)

search_facet_input width not wide enough

Hi,

I'm having a problem that I couldn't resolve through css. The width of search_facet_input, computed by autoGrowInput(), is just a little too little. See https://skitch.com/lilbee/g5fua/greencon-2011-attendees

The only solution I've come up with is a hack on hack:

Index: public/javascripts/vendor/visualsearch.js
===================================================================
--- public/javascripts/vendor/visualsearch.js   (revision d5bab795c8d3e2a047896f403fe9cab4fe226b7d)  
+++ public/javascripts/vendor/visualsearch.js   (revision cfcbe179e877eada55916cbf390df051badec9e2)
@@ -1458,7 +1458,7 @@
                      .replace(/>/g, '>');

         $tester.html(value);
-        $input.width($tester.width() + 3);
+        $input.width($tester.width() + 6);
         $input.trigger('updated.autogrow');
       });

Is there a way to do this via css?

I doubt you would want to pull the change above as clearly this problem is instigated by something in our css, combined with the visualsearch css. I can try to add an option to specify what the padding is and submit that in a pull request if unable to do via css.

Thanks for yet another super awesome component!

~b

name: amit kumar becomes name: amit text: kumar

queries with spaces cannot be used as the words are labeled as text.

And/Or queries, Grouping and Operators

It would be great to be able to construct more complex queries using the visual search widget. I believe that this could be achieved through the addition of the following features:

• Visual search should support and/or operators which would act like facets without a value. Ie: name: bob or name: john
• Visual search should support a grouping mechanism which would allow you to construct more complex queries such as: ((name: bob or name: john) and profession: software engineer)
• Visual search should support a operator system which would be a alternative to the facet system. Ie. title contains game or price <= 15

These features would go a long way in making Visual search an extremely useful product.

Just my 2 cents. :)

Use image in facet value auto-completion

I tried putting arbitrary HTML in the value but it was escaped.

The use case is for autocompleting a list of users and having a small 16x16ish gravatar show up next to people's names

Make visualsearch work with the new history api to enable 'back button' functionality

It would be nice if there was any easy way to push facets and their values into the browser history using pushState and then pop them off again and recreate all of the facets/values and rerun the search when the user hits the back button.

AJAX powered callback data incorrect ordering

Within my switch, I've cased a few values together and used the searchTerm variable to narrow down my search.

The code use to do my AJAX request is the following:

var cCountry = category.toLowerCase().replace(" ", "");

$.get('api/hotels.php', {
    c: cCountry,
    h: searchTerm
}, function(hSuggest) {
    // console.log(hSuggest);
    callback(hSuggest);
}, "json");

Which works fine, all data is passed into the suggestions. The hotels.php page specifies an ORDER BY name ASC which when viewing the output normally works fine, yet the suggestions always seem to have one item which is not alphabetically ordered at the top.

You can see a picture here.

Accepting values that are not in the list

Is it possible for users to type a value which is not in the list and then continue using the visual search as normal? I'm trying this, but it seems that I must select one of the listed values, before adding other categories and their values.

Non-duplication of facet:value pairs

Once a particular facet value has been selected, don't list it in the dropdown again.

Limit # of Facets?

Can you limit the number of Facets per Visual Search box?

Broke filter when type ":"

At documentation page for example, if you type title and after that type ":" broke the script. The problem is the call to this.options.callbacks.facetMatches() isn't present at that object and also the facetMatches function should receive the callback method.
Thanks

How can I allow one facet for once in a search?

How can we setup visuablsearch to allow one facet to be selected only once ?

e.g on example at http://documentcloud.github.com/visualsearch/

If I have selected "Country" once in a search box, the country facet should not be shown again ?

I tried to look for some documentation, but didn't get lucky.

Thanks,
Chetan.

Cant click scroll bar in Chrome (windows / mac)

Steps to reproduce:

• Enter Country,
• when the list of countries appears try to click the buttons in the scroll bar
• Box disappears making it impossible to scroll with the mouse

Disable facets autocomplete sorting

Hi there,

I would like to disable the sorting on the facets autocomplete. I tried to take a look but my JS skills are still limited.
I found this in the search_facet.js:

resp(_.sortBy(matches, function(match) {
        if (match == value || match.value == value) return '';
        else return match;
      }));

But I don't know how to fix it :(
May I have some help here?

Cheers,
dOob d'Argent