454 lines
18 KiB
HTML
Executable File
454 lines
18 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>DocumentCloud's VisualSearch.js</title>
|
|
<style>
|
|
body {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
background: #FEF3CA;
|
|
color: #022;
|
|
height: 100%;
|
|
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
|
|
}
|
|
div.container {
|
|
width: 720px;
|
|
margin: 50px 0 50px 50px;
|
|
}
|
|
p, li {
|
|
margin: 16px 0 16px 0;
|
|
width: 550px;
|
|
}
|
|
p.break {
|
|
margin-top: 35px;
|
|
}
|
|
ol {
|
|
padding-left: 24px;
|
|
}
|
|
ol li {
|
|
font-weight: bold;
|
|
margin-left: 0;
|
|
}
|
|
a, a:visited {
|
|
padding: 0 2px;
|
|
text-decoration: none;
|
|
background: #f0c095;
|
|
color: #252519;
|
|
}
|
|
a:active, a:hover {
|
|
color: #FFF;
|
|
background: #C25D00;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 40px;
|
|
}
|
|
b.header {
|
|
font-size: 18px;
|
|
}
|
|
span.alias {
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
margin-left: 20px;
|
|
}
|
|
table {
|
|
margin: 16px 0; padding: 0;
|
|
}
|
|
tr, td, th {
|
|
margin: 0; padding: 0;
|
|
text-align: left;
|
|
}
|
|
th {
|
|
padding: 24px 0 0;
|
|
}
|
|
tr:first-child th {
|
|
padding-top: 0;
|
|
}
|
|
td {
|
|
padding: 6px 15px 6px 0;
|
|
}
|
|
td.definition {
|
|
line-height: 18px;
|
|
font-size: 14px;
|
|
}
|
|
table.downloads td {
|
|
padding-left: 18px;
|
|
}
|
|
.demo-hint {
|
|
font-size: 13px;
|
|
margin: 0 0 12px 12px;
|
|
font-weight: normal;
|
|
}
|
|
#VS code, #VS pre, #VS tt {
|
|
font-family: Monaco, Consolas, "Lucida Console", monospace;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
color: #444;
|
|
background: none;
|
|
}
|
|
#VS code {
|
|
margin-left: 8px;
|
|
padding: 0 0 0 12px;
|
|
font-weight: normal;
|
|
}
|
|
#VS pre {
|
|
font-size: 12px;
|
|
padding: 2px 0 2px 0;
|
|
border-left: 6px solid #829C37;
|
|
margin: 12px 0;
|
|
}
|
|
#search_query {
|
|
margin: 18px 0;
|
|
opacity: 0;
|
|
}
|
|
#search_query .raquo {
|
|
font-size: 18px;
|
|
line-height: 12px;
|
|
font-weight: bold;
|
|
margin-right: 4px;
|
|
}
|
|
#search_query2 {
|
|
margin: 18px 0;
|
|
opacity: 0;
|
|
}
|
|
#search_query2 .raquo {
|
|
font-size: 18px;
|
|
line-height: 12px;
|
|
font-weight: bold;
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="lib/css/reset.css" type="text/css" media="screen" charset="utf-8">
|
|
<link rel="stylesheet" href="lib/css/icons.css" type="text/css" media="screen" charset="utf-8">
|
|
<link rel="stylesheet" href="lib/css/workspace.css" type="text/css" media="screen" charset="utf-8">
|
|
|
|
<script src="vendor/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script>
|
|
<!-- <script src="vendor/backported/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script> -->
|
|
<script src="vendor/jquery.ui.core.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="vendor/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="vendor/jquery.ui.position.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="vendor/jquery.ui.autocomplete.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="vendor/underscore-1.1.5.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="vendor/backbone-0.5.0.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/visualsearch.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/views/search_box.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/views/search_facet.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/views/search_input.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/models/search_facets.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/models/search_query.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/utils/backbone_extensions.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/utils/hotkeys.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/utils/jquery_extensions.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/utils/search_parser.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/utils/inflector.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="lib/js/templates/templates.js" type="text/javascript" charset="utf-8"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container" id="VS">
|
|
|
|
<h1><a href="index.html">VisualSearch.js</a></h1>
|
|
|
|
<p>
|
|
<a href="http://github.com/documentcloud/visualsearch">VisualSearch.js</a>
|
|
enhances ordinary search boxes with the ability to autocomplete
|
|
faceted search queries. Specify the facets for completion, along with the
|
|
completable values for any facet. You can retrieve the search query as a
|
|
structured object, so you don't have to parse the query string yourself.
|
|
</p>
|
|
|
|
<p>
|
|
<a href="docs/visualsearch.html">The complete annotated source code</a>
|
|
is also available.
|
|
</p>
|
|
|
|
<p>
|
|
The project is
|
|
<a href="http://github.com/documentcloud/visualsearch/">hosted on GitHub</a>.
|
|
You can report bugs and discuss features on the
|
|
<a href="http://github.com/documentcloud/visualsearch/issues">issues page</a>,
|
|
on Freenode in the <tt>#documentcloud</tt> channel,
|
|
or send tweets to <a href="http://twitter.com/documentcloud">@documentcloud</a>.
|
|
</p>
|
|
|
|
<p>
|
|
<i>VisualSearch.js is an open-source component of <a href="http://documentcloud.org/">DocumentCloud</a>.</i>
|
|
</p>
|
|
<h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>, <b>filter</b>, <b>access</b>, <b>title</b>, <b>city</b>, <b>state</b>, or <b>country</b>.</i></span></h2>
|
|
|
|
<div id="search_box_container"></div>
|
|
<div id="search_query"> </div>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(document).ready(function() {
|
|
window.visualSearch = VS.init({
|
|
container : $('#search_box_container'),
|
|
query : 'country: "South Africa" account: 5-samuel title: "Pentagon Papers"',
|
|
// query : '',
|
|
unquotable : [
|
|
'text',
|
|
'account',
|
|
'filter',
|
|
'access'
|
|
],
|
|
callbacks : {
|
|
search : function(query, searchCollection) {
|
|
var $query = $('#search_query');
|
|
$query.stop().animate({opacity : 1}, {duration: 300, queue: false});
|
|
$query.html('<span class="raquo">»</span> You searched for: <b>' + searchCollection.serialize() + '</b>');
|
|
clearTimeout(window.queryHideDelay);
|
|
window.queryHideDelay = setTimeout(function() {
|
|
$query.animate({
|
|
opacity : 0
|
|
}, {
|
|
duration: 1000,
|
|
queue: false
|
|
});
|
|
}, 2000);
|
|
},
|
|
valueMatches : function(category, searchTerm, callback) {
|
|
switch (category) {
|
|
case 'account':
|
|
callback([
|
|
{ value: '1-amanda', label: 'Amanda' },
|
|
{ value: '2-aron', label: 'Aron' },
|
|
{ value: '3-eric', label: 'Eric' },
|
|
{ value: '4-jeremy', label: 'Jeremy' },
|
|
{ value: '5-samuel', label: 'Samuel' },
|
|
{ value: '6-scott', label: 'Scott' }
|
|
]);
|
|
break;
|
|
case 'filter':
|
|
callback(['published', 'unpublished', 'draft']);
|
|
break;
|
|
case 'access':
|
|
callback(['public', 'private', 'protected']);
|
|
break;
|
|
case 'title':
|
|
callback([
|
|
'Pentagon Papers',
|
|
'CoffeeScript Manual',
|
|
'Laboratory for Object Oriented Thinking',
|
|
'A Repository Grows in Brooklyn'
|
|
]);
|
|
break;
|
|
case 'city':
|
|
callback([
|
|
'Cleveland',
|
|
'New York City',
|
|
'Brooklyn',
|
|
'Manhattan',
|
|
'Queens',
|
|
'The Bronx',
|
|
'Staten Island',
|
|
'San Francisco',
|
|
'Los Angeles',
|
|
'Seattle',
|
|
'London',
|
|
'Portland',
|
|
'Chicago',
|
|
'Boston'
|
|
])
|
|
break;
|
|
case 'state':
|
|
callback([
|
|
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
|
|
"Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
|
|
"Georgia", "Guam", "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 Carolina",
|
|
"North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania",
|
|
"Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
|
|
"Texas", "Utah", "Vermont", "Virginia", "Virgin Islands",
|
|
"Washington", "West Virginia", "Wisconsin", "Wyoming"
|
|
]);
|
|
break
|
|
case 'country':
|
|
callback([
|
|
"China", "India", "United States", "Indonesia", "Brazil",
|
|
"Pakistan", "Bangladesh", "Nigeria", "Russia", "Japan",
|
|
"Mexico", "Philippines", "Vietnam", "Ethiopia", "Egypt",
|
|
"Germany", "Turkey", "Iran", "Thailand", "D. R. of Congo",
|
|
"France", "United Kingdom", "Italy", "Myanmar", "South Africa",
|
|
"South Korea", "Colombia", "Ukraine", "Spain", "Tanzania",
|
|
"Sudan", "Kenya", "Argentina", "Poland", "Algeria",
|
|
"Canada", "Uganda", "Morocco", "Iraq", "Nepal",
|
|
"Peru", "Afghanistan", "Venezuela", "Malaysia", "Uzbekistan",
|
|
"Saudi Arabia", "Ghana", "Yemen", "North Korea", "Mozambique",
|
|
"Taiwan", "Syria", "Ivory Coast", "Australia", "Romania",
|
|
"Sri Lanka", "Madagascar", "Cameroon", "Angola", "Chile",
|
|
"Netherlands", "Burkina Faso", "Niger", "Kazakhstan", "Malawi",
|
|
"Cambodia", "Guatemala", "Ecuador", "Mali", "Zambia",
|
|
"Senegal", "Zimbabwe", "Chad", "Cuba", "Greece",
|
|
"Portugal", "Belgium", "Czech Republic", "Tunisia", "Guinea",
|
|
"Rwanda", "Dominican Republic", "Haiti", "Bolivia", "Hungary",
|
|
"Belarus", "Somalia", "Sweden", "Benin", "Azerbaijan",
|
|
"Burundi", "Austria", "Honduras", "Switzerland", "Bulgaria",
|
|
"Serbia", "Israel", "Tajikistan", "Hong Kong", "Papua New Guinea",
|
|
"Togo", "Libya", "Jordan", "Paraguay", "Laos",
|
|
"El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
|
|
"Slovakia", "Finland", "Eritrea", "Turkmenistan"
|
|
], {preserveOrder: true});
|
|
break;
|
|
}
|
|
},
|
|
facetMatches : function(callback) {
|
|
callback([
|
|
'account', 'filter', 'access', 'title',
|
|
{ label: 'city', category: 'location' },
|
|
{ label: 'address', category: 'location' },
|
|
{ label: 'country', category: 'location' },
|
|
{ label: 'state', category: 'location' },
|
|
]);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
<div id="search_box_container2"></div>
|
|
<div id="search_query2"> </div>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(document).ready(function() {
|
|
var visualSearch = VS.init({
|
|
container : $('#search_box_container2'),
|
|
query : '',
|
|
// query : '',
|
|
unquotable : [
|
|
'text',
|
|
'account',
|
|
'filter',
|
|
'access'
|
|
],
|
|
callbacks : {
|
|
search : function(query, searchCollection) {
|
|
console.log(["query", searchCollection.facets(), query]);
|
|
var $query = $('#search_query2');
|
|
$query.stop().animate({opacity : 1}, {duration: 300, queue: false});
|
|
$query.html('<span class="raquo">»</span> You searched for: <b>' + searchCollection.serialize() + '</b>');
|
|
clearTimeout(window.queryHideDelay2);
|
|
window.queryHideDelay2 = setTimeout(function() {
|
|
$query.animate({
|
|
opacity : 0
|
|
}, {
|
|
duration: 1000,
|
|
queue: false
|
|
});
|
|
}, 2000);
|
|
},
|
|
valueMatches : function(category, searchTerm, callback) {
|
|
switch (category) {
|
|
case 'account':
|
|
callback([
|
|
{ value: '1-amanda', label: 'Amanda' },
|
|
{ value: '2-aron', label: 'Aron' },
|
|
{ value: '3-eric', label: 'Eric' },
|
|
{ value: '4-jeremy', label: 'Jeremy' },
|
|
{ value: '5-samuel', label: 'Samuel' },
|
|
{ value: '6-scott', label: 'Scott' }
|
|
]);
|
|
break;
|
|
case 'filter':
|
|
callback(['published', 'unpublished', 'draft']);
|
|
break;
|
|
case 'access':
|
|
callback(['public', 'private', 'protected']);
|
|
break;
|
|
case 'title':
|
|
callback([
|
|
'Pentagon Papers',
|
|
'CoffeeScript Manual',
|
|
'Laboratory for Object Oriented Thinking',
|
|
'A Repository Grows in Brooklyn'
|
|
]);
|
|
break;
|
|
case 'city':
|
|
callback([
|
|
'Cleveland',
|
|
'New York City',
|
|
'Brooklyn',
|
|
'Manhattan',
|
|
'Queens',
|
|
'The Bronx',
|
|
'Staten Island',
|
|
'San Francisco',
|
|
'Los Angeles',
|
|
'Seattle',
|
|
'London',
|
|
'Portland',
|
|
'Chicago',
|
|
'Boston'
|
|
])
|
|
break;
|
|
case 'state':
|
|
callback([
|
|
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
|
|
"Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
|
|
"Georgia", "Guam", "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 Carolina",
|
|
"North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania",
|
|
"Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
|
|
"Texas", "Utah", "Vermont", "Virginia", "Virgin Islands",
|
|
"Washington", "West Virginia", "Wisconsin", "Wyoming"
|
|
]);
|
|
break
|
|
case 'country':
|
|
callback([
|
|
"China", "India", "United States", "Indonesia", "Brazil",
|
|
"Pakistan", "Bangladesh", "Nigeria", "Russia", "Japan",
|
|
"Mexico", "Philippines", "Vietnam", "Ethiopia", "Egypt",
|
|
"Germany", "Turkey", "Iran", "Thailand", "D. R. of Congo",
|
|
"France", "United Kingdom", "Italy", "Myanmar", "South Africa",
|
|
"South Korea", "Colombia", "Ukraine", "Spain", "Tanzania",
|
|
"Sudan", "Kenya", "Argentina", "Poland", "Algeria",
|
|
"Canada", "Uganda", "Morocco", "Iraq", "Nepal",
|
|
"Peru", "Afghanistan", "Venezuela", "Malaysia", "Uzbekistan",
|
|
"Saudi Arabia", "Ghana", "Yemen", "North Korea", "Mozambique",
|
|
"Taiwan", "Syria", "Ivory Coast", "Australia", "Romania",
|
|
"Sri Lanka", "Madagascar", "Cameroon", "Angola", "Chile",
|
|
"Netherlands", "Burkina Faso", "Niger", "Kazakhstan", "Malawi",
|
|
"Cambodia", "Guatemala", "Ecuador", "Mali", "Zambia",
|
|
"Senegal", "Zimbabwe", "Chad", "Cuba", "Greece",
|
|
"Portugal", "Belgium", "Czech Republic", "Tunisia", "Guinea",
|
|
"Rwanda", "Dominican Republic", "Haiti", "Bolivia", "Hungary",
|
|
"Belarus", "Somalia", "Sweden", "Benin", "Azerbaijan",
|
|
"Burundi", "Austria", "Honduras", "Switzerland", "Bulgaria",
|
|
"Serbia", "Israel", "Tajikistan", "Hong Kong", "Papua New Guinea",
|
|
"Togo", "Libya", "Jordan", "Paraguay", "Laos",
|
|
"El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
|
|
"Slovakia", "Finland", "Eritrea", "Turkmenistan"
|
|
]);
|
|
break;
|
|
}
|
|
},
|
|
facetMatches : function(callback) {
|
|
callback([
|
|
'account', 'filter', 'access', 'title',
|
|
{ label: 'city', category: 'location' },
|
|
{ label: 'address', category: 'location' },
|
|
{ label: 'country', category: 'location' },
|
|
{ label: 'state', category: 'location' },
|
|
], {
|
|
preserveOrder: true
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|