mirror of
https://github.com/jimeh/fancy_input.git
synced 2026-02-19 11:36:41 +00:00
things all work, about time for public release
This commit is contained in:
@@ -4,11 +4,32 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
|
|||||||
|
|
||||||
/* @end */
|
/* @end */
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #fff;
|
||||||
|
font: 12px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, dl, hr, h1, h2, h3, h4, h5, h6, ol,
|
||||||
|
ul, pre, table, address, fieldset {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 25px; }
|
||||||
|
h2 { font-size: 23px; }
|
||||||
|
h3 { font-size: 21px; }
|
||||||
|
h4 { font-size: 19px; }
|
||||||
|
h5 { font-size: 17px; }
|
||||||
|
h6 { font-size: 13px; }
|
||||||
|
|
||||||
input {
|
input {
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
|
width: 200px;
|
||||||
|
padding: 3px 3px;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
width: 960px;
|
width: 960px;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
||||||
|
|
||||||
<title>examples</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
|
||||||
|
|
||||||
<script src="../javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
<script src="../suggest_results/jquery.suggest_results.js" type="text/javascript" charset="utf-8"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../suggest_results/jquery.suggest_results.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
|
||||||
|
|
||||||
<script type="text/javascript" charset="utf-8">
|
|
||||||
$(document).ready(function(){
|
|
||||||
|
|
||||||
var data = [
|
|
||||||
{title: "head", href: "/head", match: "head zzz"},
|
|
||||||
{title: "headache", href: "/headache", match: "headache zzz"},
|
|
||||||
{title: "health", href: "/health", match: "health zzz"},
|
|
||||||
{title: "healthcare", href: "/healthcare", match: "healthcare zzz"},
|
|
||||||
{title: "healthier", href: "/healthier", match: "healthier zzz"},
|
|
||||||
{title: "heck", href: "/heck", match: "heck zzz"},
|
|
||||||
{title: "hectic", href: "/hectic", match: "hectic zzz"},
|
|
||||||
{title: "held", href: "/held", match: "held zzz"},
|
|
||||||
{title: "hell", href: "/hell", match: "hell zzz"},
|
|
||||||
];
|
|
||||||
|
|
||||||
$("input").suggest_results({
|
|
||||||
data: data
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container">
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<input type="text" name="example1" value="" id="example1" />
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<input type="text" name="example2" value="" id="example2" />
|
|
||||||
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<input type="text" name="example3" value="" id="example3" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
102
demo/demo.js
Normal file
102
demo/demo.js
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
var data = [
|
||||||
|
{"title": "Ädams, Egbert", "info": "Bedfordshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Altman, Alisha", "info": "Buckinghamshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Archibald, Janna", "info": "Cambridgeshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Auman, Cody", "info": "Cheshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Bagley, Sheree", "info": "Cornwall", "href": "/demo/user/5"},
|
||||||
|
{"title": "Ballou, Wilmot", "info": "Cumbria", "href": "/demo/user/6"},
|
||||||
|
{"title": "Bard, Cassian", "info": "Derbyshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Bash, Latanya", "info": "Devon", "href": "/demo/user/2"},
|
||||||
|
{"title": "Beail, May", "info": "Dorset", "href": "/demo/user/3"},
|
||||||
|
{"title": "Black, Lux", "info": "Durham", "href": "/demo/user/4"},
|
||||||
|
{"title": "Bloise, India", "info": "East Sussex", "href": "/demo/user/5"},
|
||||||
|
{"title": "Blyant, Nora", "info": "Essex", "href": "/demo/user/6"},
|
||||||
|
{"title": "Bollinger, Carter", "info": "Gloucestershire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Burns, Jaycob", "info": "Hampshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Carden, Preston", "info": "Hertfordshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Carter, Merrilyn", "info": "Kent", "href": "/demo/user/4"},
|
||||||
|
{"title": "Christner, Addie", "info": "Lancashire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Churchill, Mirabelle", "info": "Leicestershire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Conkle, Erin", "info": "Lincolnshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Countryman, Abner", "info": "Norfolk", "href": "/demo/user/2"},
|
||||||
|
{"title": "Courtney, Edgar", "info": "Northamptonshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Cowher, Antony", "info": "Northumberland", "href": "/demo/user/4"},
|
||||||
|
{"title": "Craig, Charlie", "info": "North Yorkshire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Cram, Zacharias", "info": "Nottinghamshire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Cressman, Ted", "info": "Oxfordshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Crissman, Annie", "info": "Shropshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Davis, Palmer", "info": "Somerset", "href": "/demo/user/3"},
|
||||||
|
{"title": "Downing, Casimir", "info": "Staffordshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Earl, Missie", "info": "Suffolk", "href": "/demo/user/5"},
|
||||||
|
{"title": "Eckert, Janele", "info": "Surrey", "href": "/demo/user/6"},
|
||||||
|
{"title": "Eisenman, Briar", "info": "Warwickshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Fitzgerald, Love", "info": "West Sussex", "href": "/demo/user/2"},
|
||||||
|
{"title": "Fleming, Sidney", "info": "Wiltshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Fuchs, Bridger", "info": "Worcestershire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Fulton, Rosalynne", "info": "Durham", "href": "/demo/user/5"},
|
||||||
|
{"title": "Fye, Webster", "info": "East Sussex", "href": "/demo/user/6"},
|
||||||
|
{"title": "Geyer, Rylan", "info": "Essex", "href": "/demo/user/1"},
|
||||||
|
{"title": "Greene, Charis", "info": "Gloucestershire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Greif, Jem", "info": "Hampshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Guest, Sarahjeanne", "info": "Hertfordshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Harper, Phyllida", "info": "Kent", "href": "/demo/user/5"},
|
||||||
|
{"title": "Hildyard, Erskine", "info": "Lancashire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Hoenshell, Eulalia", "info": "Leicestershire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Isaman, Lalo", "info": "Lincolnshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "James, Diamond", "info": "Norfolk", "href": "/demo/user/3"},
|
||||||
|
{"title": "Jenkins, Merrill", "info": "Northamptonshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Jube, Bennett", "info": "Northumberland", "href": "/demo/user/5"},
|
||||||
|
{"title": "Kava, Marianne", "info": "North Yorkshire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Kern, Linda", "info": "Nottinghamshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Klockman, Jenifer", "info": "Oxfordshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Lacon, Quincy", "info": "Shropshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Laurenzi, Leland", "info": "Somerset", "href": "/demo/user/4"},
|
||||||
|
{"title": "Leichter, Jeane", "info": "Staffordshire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Leslie, Kerrie", "info": "Suffolk", "href": "/demo/user/6"},
|
||||||
|
{"title": "Lester, Noah", "info": "Surrey", "href": "/demo/user/1"},
|
||||||
|
{"title": "Llora, Roxana", "info": "Warwickshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Lombardi, Polly", "info": "West Sussex", "href": "/demo/user/3"},
|
||||||
|
{"title": "Lowstetter, Louisa", "info": "Wiltshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Mays, Emery", "info": "Worcestershire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Mccullough, Bernadine", "info": "Durham", "href": "/demo/user/6"},
|
||||||
|
{"title": "Mckinnon, Kristie", "info": "East Sussex", "href": "/demo/user/1"},
|
||||||
|
{"title": "Meyers, Hector", "info": "Essex", "href": "/demo/user/2"},
|
||||||
|
{"title": "Monahan, Penelope", "info": "Gloucestershire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Mull, Kaelea", "info": "Hampshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Newbiggin, Osmond", "info": "Hertfordshire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Nickolson, Alfreda", "info": "Kent", "href": "/demo/user/6"},
|
||||||
|
{"title": "Pawle, Jacki", "info": "Lancashire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Paynter, Nerissa", "info": "Leicestershire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Pinney, Wilkie", "info": "Lincolnshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Pratt, Ricky", "info": "Norfolk", "href": "/demo/user/4"},
|
||||||
|
{"title": "Putnam, Stephanie", "info": "Northamptonshire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Ream, Terrence", "info": "Northumberland", "href": "/demo/user/6"},
|
||||||
|
{"title": "Rumbaugh, Noelle", "info": "North Yorkshire", "href": "/demo/user/1"},
|
||||||
|
{"title": "Ryals, Titania", "info": "Nottinghamshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Saylor, Lenora", "info": "Oxfordshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Schofield, Denice", "info": "Shropshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Schuck, John", "info": "Somerset", "href": "/demo/user/5"},
|
||||||
|
{"title": "Scott, Clover", "info": "Staffordshire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Smith, Estella", "info": "Suffolk", "href": "/demo/user/1"},
|
||||||
|
{"title": "Smothers, Matthew", "info": "Surrey", "href": "/demo/user/2"},
|
||||||
|
{"title": "Stainforth, Maurene", "info": "Warwickshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Stephenson, Phillipa", "info": "West Sussex", "href": "/demo/user/4"},
|
||||||
|
{"title": "Stewart, Hyram", "info": "Wiltshire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Stough, Gussie", "info": "Worcestershire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Strickland, Temple", "info": "Durham", "href": "/demo/user/1"},
|
||||||
|
{"title": "Sullivan, Gertie", "info": "East Sussex", "href": "/demo/user/2"},
|
||||||
|
{"title": "Swink, Stefanie", "info": "Essex", "href": "/demo/user/3"},
|
||||||
|
{"title": "Tavoularis, Terance", "info": "Gloucestershire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Taylor, Kizzy", "info": "Hampshire", "href": "/demo/user/5"},
|
||||||
|
{"title": "Thigpen, Alwyn", "info": "Hertfordshire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Treeby, Jim", "info": "Kent", "href": "/demo/user/1"},
|
||||||
|
{"title": "Trevithick, Jayme", "info": "Lancashire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Waldron, Ashley", "info": "Leicestershire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Wheeler, Bysshe", "info": "Lincolnshire", "href": "/demo/user/4"},
|
||||||
|
{"title": "Whishaw, Dodie", "info": "Norfolk", "href": "/demo/user/5"},
|
||||||
|
{"title": "Whitehead, Jericho", "info": "Northamptonshire", "href": "/demo/user/6"},
|
||||||
|
{"title": "Wilks, Debby", "info": "Northumberland", "href": "/demo/user/1"},
|
||||||
|
{"title": "Wire, Tallulah", "info": "North Yorkshire", "href": "/demo/user/2"},
|
||||||
|
{"title": "Woodworth, Alexandria", "info": "Nottinghamshire", "href": "/demo/user/3"},
|
||||||
|
{"title": "Zaun, Jillie", "info": "", "href": ""}
|
||||||
|
];
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
[
|
|
||||||
{title: "head", href: "/head", match: "head zzz"},
|
|
||||||
{title: "headache", href: "/headache", match: "headache zzz"},
|
|
||||||
{title: "health", href: "/health", match: "health zzz"},
|
|
||||||
{title: "healthcare", href: "/healthcare", match: "healthcare zzz"},
|
|
||||||
{title: "healthier", href: "/healthier", match: "healthier zzz"},
|
|
||||||
{title: "heck", href: "/heck", match: "heck zzz"},
|
|
||||||
{title: "hectic", href: "/hectic", match: "hectic zzz"},
|
|
||||||
{title: "held", href: "/held", match: "held zzz"},
|
|
||||||
{title: "hell", href: "/hell", match: "hell zzz"},
|
|
||||||
];
|
|
||||||
71
demo/index.html
Normal file
71
demo/index.html
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
|
||||||
|
<title>Suggest Results Demo</title>
|
||||||
|
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
|
||||||
|
<script src="../javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script src="../suggest_results/jquery.suggest_results.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../suggest_results/jquery.suggest_results.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="demo.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
$("#example1").suggest_results({
|
||||||
|
data: data
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#example2").suggest_results({
|
||||||
|
url: "server-side.php"
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#example3").suggest_results({
|
||||||
|
url: "server-side.php",
|
||||||
|
name: "example3",
|
||||||
|
limit: 4,
|
||||||
|
tpl_result_body: '<span class="title">{{title}}</span><span class="info">{{info}}</span>'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="text/css" media="screen">
|
||||||
|
|
||||||
|
/* Example 3 */
|
||||||
|
#suggest_results.example3 ol li span.info {
|
||||||
|
color: #888;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<p></p>
|
||||||
|
<h1>Suggest Results Demo</h1>
|
||||||
|
<p>
|
||||||
|
<strong>Results from local array:</strong><br />
|
||||||
|
<input type="text" name="example1" value="" id="example1" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Results from ajax call:</strong><br />
|
||||||
|
<input type="text" name="example2" value="" id="example2" />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Customized results from ajax call:</strong><br />
|
||||||
|
<input type="text" name="example3" value="" id="example3" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
135
demo/server-side.php
Normal file
135
demo/server-side.php
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
/*
|
||||||
|
Borrowed and modified this example file from some other search suggest script.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
this is just a static test version using a hard-coded countries array.
|
||||||
|
normally you would be populating the array out of a database
|
||||||
|
*/
|
||||||
|
|
||||||
|
$aUsers = array(
|
||||||
|
"Ädams, Egbert", "Altman, Alisha", "Archibald, Janna", "Auman, Cody", "Bagley, Sheree",
|
||||||
|
"Ballou, Wilmot", "Bard, Cassian", "Bash, Latanya", "Beail, May", "Black, Lux",
|
||||||
|
"Bloise, India", "Blyant, Nora", "Bollinger, Carter", "Burns, Jaycob", "Carden, Preston",
|
||||||
|
"Carter, Merrilyn", "Christner, Addie", "Churchill, Mirabelle", "Conkle, Erin",
|
||||||
|
"Countryman, Abner", "Courtney, Edgar", "Cowher, Antony", "Craig, Charlie",
|
||||||
|
"Cram, Zacharias", "Cressman, Ted", "Crissman, Annie", "Davis, Palmer",
|
||||||
|
"Downing, Casimir", "Earl, Missie", "Eckert, Janele", "Eisenman, Briar",
|
||||||
|
"Fitzgerald, Love", "Fleming, Sidney", "Fuchs, Bridger", "Fulton, Rosalynne",
|
||||||
|
"Fye, Webster", "Geyer, Rylan", "Greene, Charis", "Greif, Jem", "Guest, Sarahjeanne",
|
||||||
|
"Harper, Phyllida", "Hildyard, Erskine", "Hoenshell, Eulalia", "Isaman, Lalo",
|
||||||
|
"James, Diamond", "Jenkins, Merrill", "Jube, Bennett", "Kava, Marianne", "Kern, Linda",
|
||||||
|
"Klockman, Jenifer", "Lacon, Quincy", "Laurenzi, Leland", "Leichter, Jeane",
|
||||||
|
"Leslie, Kerrie", "Lester, Noah", "Llora, Roxana", "Lombardi, Polly", "Lowstetter, Louisa",
|
||||||
|
"Mays, Emery", "Mccullough, Bernadine", "Mckinnon, Kristie", "Meyers, Hector",
|
||||||
|
"Monahan, Penelope", "Mull, Kaelea", "Newbiggin, Osmond", "Nickolson, Alfreda",
|
||||||
|
"Pawle, Jacki", "Paynter, Nerissa", "Pinney, Wilkie", "Pratt, Ricky", "Putnam, Stephanie",
|
||||||
|
"Ream, Terrence", "Rumbaugh, Noelle", "Ryals, Titania", "Saylor, Lenora",
|
||||||
|
"Schofield, Denice", "Schuck, John", "Scott, Clover", "Smith, Estella", "Smothers, Matthew",
|
||||||
|
"Stainforth, Maurene", "Stephenson, Phillipa", "Stewart, Hyram", "Stough, Gussie",
|
||||||
|
"Strickland, Temple", "Sullivan, Gertie", "Swink, Stefanie", "Tavoularis, Terance",
|
||||||
|
"Taylor, Kizzy", "Thigpen, Alwyn", "Treeby, Jim", "Trevithick, Jayme", "Waldron, Ashley",
|
||||||
|
"Wheeler, Bysshe", "Whishaw, Dodie", "Whitehead, Jericho", "Wilks, Debby", "Wire, Tallulah",
|
||||||
|
"Woodworth, Alexandria", "Zaun, Jillie"
|
||||||
|
);
|
||||||
|
|
||||||
|
$aInfo = array(
|
||||||
|
"Bedfordshire", "Buckinghamshire", "Cambridgeshire", "Cheshire", "Cornwall", "Cumbria",
|
||||||
|
"Derbyshire", "Devon", "Dorset", "Durham", "East Sussex", "Essex", "Gloucestershire",
|
||||||
|
"Hampshire", "Hertfordshire", "Kent", "Lancashire", "Leicestershire", "Lincolnshire",
|
||||||
|
"Norfolk", "Northamptonshire", "Northumberland", "North Yorkshire", "Nottinghamshire",
|
||||||
|
"Oxfordshire", "Shropshire", "Somerset", "Staffordshire", "Suffolk", "Surrey",
|
||||||
|
"Warwickshire", "West Sussex", "Wiltshire", "Worcestershire", "Durham", "East Sussex",
|
||||||
|
"Essex", "Gloucestershire", "Hampshire", "Hertfordshire", "Kent", "Lancashire",
|
||||||
|
"Leicestershire", "Lincolnshire", "Norfolk", "Northamptonshire", "Northumberland",
|
||||||
|
"North Yorkshire", "Nottinghamshire", "Oxfordshire", "Shropshire", "Somerset",
|
||||||
|
"Staffordshire", "Suffolk", "Surrey", "Warwickshire", "West Sussex", "Wiltshire",
|
||||||
|
"Worcestershire", "Durham", "East Sussex", "Essex", "Gloucestershire", "Hampshire",
|
||||||
|
"Hertfordshire", "Kent", "Lancashire", "Leicestershire", "Lincolnshire", "Norfolk",
|
||||||
|
"Northamptonshire", "Northumberland", "North Yorkshire", "Nottinghamshire",
|
||||||
|
"Oxfordshire", "Shropshire", "Somerset", "Staffordshire", "Suffolk", "Surrey",
|
||||||
|
"Warwickshire", "West Sussex", "Wiltshire", "Worcestershire", "Durham", "East Sussex",
|
||||||
|
"Essex", "Gloucestershire", "Hampshire", "Hertfordshire", "Kent", "Lancashire",
|
||||||
|
"Leicestershire", "Lincolnshire", "Norfolk", "Northamptonshire", "Northumberland",
|
||||||
|
"North Yorkshire", "Nottinghamshire"
|
||||||
|
);
|
||||||
|
|
||||||
|
$aImg = array(
|
||||||
|
"demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5",
|
||||||
|
"demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4",
|
||||||
|
"demo/cast5", "demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3",
|
||||||
|
"demo/cast4", "demo/cast5", "demo/cast6", "demo/cast1", "demo/cast2",
|
||||||
|
"demo/cast3", "demo/cast4", "demo/cast5", "demo/cast6", "demo/cast1",
|
||||||
|
"demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5", "demo/cast6",
|
||||||
|
"demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5",
|
||||||
|
"demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4",
|
||||||
|
"demo/cast5", "demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3",
|
||||||
|
"demo/cast4", "demo/cast5", "demo/cast6", "demo/cast1", "demo/cast2",
|
||||||
|
"demo/cast3", "demo/cast4", "demo/cast5", "demo/cast6", "demo/cast1",
|
||||||
|
"demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5", "demo/cast6",
|
||||||
|
"demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5",
|
||||||
|
"demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4",
|
||||||
|
"demo/cast5", "demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3",
|
||||||
|
"demo/cast4", "demo/cast5", "demo/cast6", "demo/cast1", "demo/cast2",
|
||||||
|
"demo/cast3", "demo/cast4", "demo/cast5", "demo/cast6", "demo/cast1",
|
||||||
|
"demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5", "demo/cast6",
|
||||||
|
"demo/cast1", "demo/cast2", "demo/cast3", "demo/cast4", "demo/cast5",
|
||||||
|
"demo/cast6", "demo/cast1", "demo/cast2", "demo/cast3",
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
$input = strtolower( $_GET['search'] );
|
||||||
|
$len = strlen($input);
|
||||||
|
$limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;
|
||||||
|
|
||||||
|
|
||||||
|
$aResults = array();
|
||||||
|
$count = 0;
|
||||||
|
|
||||||
|
if ($len)
|
||||||
|
{
|
||||||
|
for ($i=0;$i<count($aUsers);$i++)
|
||||||
|
{
|
||||||
|
// had to use utf_decode, here
|
||||||
|
// not necessary if the results are coming from mysql
|
||||||
|
//
|
||||||
|
// if (strtolower(substr(utf8_decode($aUsers[$i]),0,$len)) == $input)
|
||||||
|
if (strpos(strtolower($aUsers[$i]), $input) !== false)
|
||||||
|
{
|
||||||
|
$count++;
|
||||||
|
$aResults[] = array(
|
||||||
|
"id"=>($i+1),
|
||||||
|
"title"=>htmlspecialchars($aUsers[$i]),
|
||||||
|
"info"=>htmlspecialchars($aInfo[$i]),
|
||||||
|
"href"=>$aImg[$i],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($limit && $count==$limit)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
|
||||||
|
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
|
||||||
|
header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
|
||||||
|
header ("Pragma: no-cache"); // HTTP/1.0
|
||||||
|
|
||||||
|
header("Content-Type: application/json");
|
||||||
|
|
||||||
|
echo "{\"results\": [\n\t";
|
||||||
|
$arr = array();
|
||||||
|
for ($i=0;$i<count($aResults);$i++)
|
||||||
|
{
|
||||||
|
$arr[] = "{\"title\": \"".$aResults[$i]['title']."\", " .
|
||||||
|
"\"info\": \"".$aResults[$i]['info']."\", " .
|
||||||
|
"\"href\": \"".$aResults[$i]['href']."\"}";
|
||||||
|
}
|
||||||
|
echo implode(",\n\t", $arr);
|
||||||
|
echo "\n]}";
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
@@ -1,33 +1,48 @@
|
|||||||
|
|
||||||
#suggest_results {
|
#suggest_results {
|
||||||
background: #fbfbfb;
|
border-bottom: 1px solid #efefef;
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#suggest_results ol {
|
||||||
|
background: #fbfbfb;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-top: none;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
#suggest_results li {
|
|
||||||
margin: 0px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
#suggest_results li.first {
|
|
||||||
|
|
||||||
}
|
#suggest_results li {
|
||||||
#suggest_results li.last {
|
margin: 0px;
|
||||||
border-bottom: none;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
#suggest_results li.result {
|
|
||||||
display: block;
|
#suggest_results li.result {
|
||||||
}
|
display: block;
|
||||||
#suggest_results li.result a {
|
}
|
||||||
display: block;
|
|
||||||
padding: 3px 5px;
|
#suggest_results li.first {
|
||||||
}
|
|
||||||
#suggest_results li.result a:hover,
|
}
|
||||||
#suggest_results li.result.selected a {
|
|
||||||
background: #698DE5;
|
#suggest_results li.last {
|
||||||
color: #fff;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#suggest_results li.result a {
|
||||||
|
display: block;
|
||||||
|
padding: 3px 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#suggest_results li.result a span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#suggest_results li.result a:hover,
|
||||||
|
#suggest_results li.result.selected a {
|
||||||
|
background: #698DE5;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
@@ -5,10 +5,17 @@
|
|||||||
|
|
||||||
self.init($options);
|
self.init($options);
|
||||||
|
|
||||||
|
var BACKSPACE = 8;
|
||||||
|
var RETURN = 13;
|
||||||
|
var ESC = 27;
|
||||||
|
var ARRUP = 38;
|
||||||
|
var ARRDN = 40;
|
||||||
|
var SPECIALS_END = 45;
|
||||||
|
|
||||||
return this.each(function(){
|
return this.each(function(){
|
||||||
var $e = $(this);
|
var $e = $(this);
|
||||||
$e.focus(function(){
|
$e.focus(function(){
|
||||||
self.attach($e, options);
|
self.attach($e, $options);
|
||||||
if ($e.val().length > 0) {
|
if ($e.val().length > 0) {
|
||||||
self.search_timeout = self.setTimeout(function(){
|
self.search_timeout = self.setTimeout(function(){
|
||||||
self.search($e, $options);
|
self.search($e, $options);
|
||||||
@@ -17,59 +24,75 @@
|
|||||||
}).blur(function(){
|
}).blur(function(){
|
||||||
self.hide();
|
self.hide();
|
||||||
}).keydown(function(e){
|
}).keydown(function(e){
|
||||||
var RETURN = 13;
|
|
||||||
var ESC = 27;
|
|
||||||
var ARRUP = 38;
|
|
||||||
var ARRDN = 40;
|
|
||||||
switch(e.keyCode) {
|
switch(e.keyCode) {
|
||||||
case ARRUP: self.select_prev($e, $options); return false;
|
case ARRUP: self.select_prev($e, $options); return false;
|
||||||
case ARRDN: self.select_next($e, $options); return false;
|
case ARRDN: self.select_next($e, $options); return false;
|
||||||
case ESC: self.clear($e, $options); break;
|
case ESC: self.clear($e, $options); break;
|
||||||
case RETURN: self.activate_selected($options); return false;
|
case RETURN: self.activate_selected($options); return false;
|
||||||
default:
|
default: self.clearTimeout(); self.search($e, $options);
|
||||||
self.clearTimeout();
|
|
||||||
self.search($e, $options);
|
|
||||||
}
|
}
|
||||||
|
}).keyup(function(e){
|
||||||
|
if (e.keyCode > SPECIALS_END || e.keyCode == BACKSPACE) {
|
||||||
|
self.clearTimeout();
|
||||||
|
self.search($e, $options);
|
||||||
|
};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.box = null;
|
$.fn.suggest_results.box = null;
|
||||||
|
$.fn.suggest_results.list = null;
|
||||||
$.fn.suggest_results.attached_to = null;
|
$.fn.suggest_results.attached_to = null;
|
||||||
$.fn.suggest_results.current_results = [];
|
$.fn.suggest_results.current_results = [];
|
||||||
$.fn.suggest_results.selected_result = null;
|
$.fn.suggest_results.selected_result = null;
|
||||||
$.fn.suggest_results.timeout = null;
|
$.fn.suggest_results.timeout = null;
|
||||||
|
$.fn.suggest_results.query_cache = [];
|
||||||
|
|
||||||
$.fn.suggest_results.init = function(options){
|
$.fn.suggest_results.init = function(options){
|
||||||
var self = $.fn.suggest_results;
|
var self = $.fn.suggest_results;
|
||||||
self.box = $("#" + options.template.container_id);
|
self.box = $("#" + options.tpl_container_id);
|
||||||
if (self.box.length == 0) {
|
if (self.box.length == 0) {
|
||||||
$("body").append(self.mustache(options.template.container, {id: options.template.container_id}));
|
$("body").append(self.mustache(options.tpl_container, {id: options.tpl_container_id}));
|
||||||
self.box = $("#" + options.template.container_id);
|
self.box = $("#" + options.tpl_container_id);
|
||||||
|
self.list = $("ol", self.box);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.search = function(elm, options){
|
$.fn.suggest_results.search = function(elm, options){
|
||||||
var self = $.fn.suggest_results;
|
var self = $.fn.suggest_results;
|
||||||
var terms = (options.exact_match) ? $.trim(elm.val()) : elm.val().split(/\s/);
|
var terms = (options.exactMatch) ? $.trim(elm.val()) : elm.val().split(/\s/);
|
||||||
if (typeof(options.url) === "string" && options.url !== "") {
|
if (typeof(options.url) === "string" && options.url !== "") {
|
||||||
//TODO support fetching results from server-side
|
self.query_for_data(elm, options);
|
||||||
} else {
|
} else {
|
||||||
var results = self.filter_data(terms, options.data, options);
|
self.current_results = self.filter_data(terms, options.data, options);
|
||||||
};
|
self.prerender(self.current_results, options);
|
||||||
self.current_results = results;
|
|
||||||
if (results.length > 0) {
|
|
||||||
self.render(results, options);
|
|
||||||
self.show();
|
|
||||||
} else {
|
|
||||||
self.hide();
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.clear = function(elm, options){
|
$.fn.suggest_results.clear = function(elm, options){
|
||||||
var self = $.fn.suggest_results;
|
var self = $.fn.suggest_results;
|
||||||
elm.val("");
|
elm.val("");
|
||||||
self.hide();
|
self.hide(0);
|
||||||
|
self.selected_result = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.suggest_results.no_results = function(options){
|
||||||
|
var self = $.fn.suggest_results;
|
||||||
|
if (options.empty) {
|
||||||
|
//TODO display "No Results" label.
|
||||||
|
} else {
|
||||||
|
self.hide(0);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.suggest_results.prerender = function(results, options){
|
||||||
|
var self = $.fn.suggest_results;
|
||||||
|
if (results.length > 0) {
|
||||||
|
self.render(results, options);
|
||||||
|
self.show();
|
||||||
|
} else {
|
||||||
|
self.no_results(options);
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.render = function(results, options){
|
$.fn.suggest_results.render = function(results, options){
|
||||||
@@ -77,14 +100,16 @@
|
|||||||
var results_length = results.length;
|
var results_length = results.length;
|
||||||
var html = "";
|
var html = "";
|
||||||
for (var i=0; i < results_length; i++) {
|
for (var i=0; i < results_length; i++) {
|
||||||
var meta = {id: "suggested_result_" + i, "class": ""};
|
var meta = $.extend({}, results[i], {id: "suggested_result_" + i, "class": ""});
|
||||||
if (i == 0) { $.extend(meta, {"class": "first"}); };
|
if (i == 0) { $.extend(meta, {"class": "first"}); };
|
||||||
if (i == results_length - 1) { $.extend(meta, {"class": "last"}); };
|
if (i == results_length - 1) { $.extend(meta, {"class": "last"}); };
|
||||||
html += self.mustache(options.template.result, $.extend({}, meta, results[i]));
|
html += self.mustache(options.tpl_result_begin, meta);
|
||||||
|
html += self.mustache(options.tpl_result_body, meta);
|
||||||
|
html += self.mustache(options.tpl_result_end, meta);
|
||||||
};
|
};
|
||||||
self.box.html("");
|
self.list.html("");
|
||||||
self.box.append(html);
|
self.list.append(html);
|
||||||
$(".result", self.box).click(function(){
|
$(".result", self.list).click(function(){
|
||||||
self.redirect_to($("a", $(this)).attr("href"));
|
self.redirect_to($("a", $(this)).attr("href"));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -93,6 +118,7 @@
|
|||||||
var self = $.fn.suggest_results;
|
var self = $.fn.suggest_results;
|
||||||
var elm_uid = self.elm_uid(elm);
|
var elm_uid = self.elm_uid(elm);
|
||||||
if (elm_uid !== self.attached_to) {
|
if (elm_uid !== self.attached_to) {
|
||||||
|
self.box.hide().attr("class", options.name);
|
||||||
var offset = elm.offset();
|
var offset = elm.offset();
|
||||||
|
|
||||||
// left offset
|
// left offset
|
||||||
@@ -112,7 +138,6 @@
|
|||||||
width -= parseInt(self.box.css("border-left-width"), 10) + parseInt(self.box.css("border-right-width"), 10);
|
width -= parseInt(self.box.css("border-left-width"), 10) + parseInt(self.box.css("border-right-width"), 10);
|
||||||
self.box.css("width", width + "px");
|
self.box.css("width", width + "px");
|
||||||
};
|
};
|
||||||
|
|
||||||
self.attached_to = elm_uid;
|
self.attached_to = elm_uid;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
@@ -121,12 +146,14 @@
|
|||||||
$.fn.suggest_results.box.show();
|
$.fn.suggest_results.box.show();
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.hide = function(){
|
$.fn.suggest_results.hide = function(delay){
|
||||||
var self = $.fn.suggest_results;
|
var self = $.fn.suggest_results;
|
||||||
|
if (typeof(delay) !== "number") { delay = 250; };
|
||||||
|
self.selected_result = null;
|
||||||
self.setTimeout(function(){
|
self.setTimeout(function(){
|
||||||
self.selected_result = null;
|
self.selected_result = null;
|
||||||
self.box.hide();
|
self.box.hide();
|
||||||
}, 500);
|
}, delay);
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.select_next = function(elm, options){
|
$.fn.suggest_results.select_next = function(elm, options){
|
||||||
@@ -140,6 +167,10 @@
|
|||||||
$(".selected", self.box).removeClass("selected");
|
$(".selected", self.box).removeClass("selected");
|
||||||
self.selected_result++;
|
self.selected_result++;
|
||||||
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
|
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
|
||||||
|
} else {
|
||||||
|
$(".selected", self.box).removeClass("selected");
|
||||||
|
self.selected_result = null;
|
||||||
|
elm.putCursorAtEnd();
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
return false;
|
return false;
|
||||||
@@ -199,12 +230,44 @@
|
|||||||
return results;
|
return results;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$.fn.suggest_results.query_for_data = function(elm, options){
|
||||||
|
var self = $.fn.suggest_results;
|
||||||
|
var term = elm.val();
|
||||||
|
var uid = options.url + "?" + term + ":" + options.limit;
|
||||||
|
if (term !== "") {
|
||||||
|
if (self.query_cache.hasOwnProperty(uid)) {
|
||||||
|
self.current_results = self.query_cache[uid];
|
||||||
|
self.prerender(self.current_results, options);
|
||||||
|
} else {
|
||||||
|
var data = { limit: options.limit };
|
||||||
|
data[options.url_query_var] = term;
|
||||||
|
$.ajax({
|
||||||
|
type: options.url_method,
|
||||||
|
url: options.url,
|
||||||
|
data: data,
|
||||||
|
dataType: "json",
|
||||||
|
success: function(response){
|
||||||
|
self.current_results = response.results;
|
||||||
|
self.query_cache[uid] = self.current_results;
|
||||||
|
self.prerender(self.current_results, options);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
self.no_results(options);
|
||||||
|
};
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.elm_uid = function(elm){
|
$.fn.suggest_results.elm_uid = function(elm){
|
||||||
var uid = "";
|
if (elm.attr("id") !== "") {
|
||||||
if ( elm.attr("id") !== "" ) { uid += "#" + elm.attr("id"); };
|
return "#" + elm.attr("id");
|
||||||
if ( elm.attr("class") !== "" ) { uid += "." + elm.attr("class"); };
|
} else if (elm.attr("class") !== "") {
|
||||||
if ( elm.attr("name") !== "" ) { uid += "[" + elm.attr("name") + "]"; };
|
return "." + elm.attr("class");
|
||||||
return uid;
|
} else if (elm.attr("name") !== "") {
|
||||||
|
return "!" + elm.attr("name");
|
||||||
|
};
|
||||||
|
return "";
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.mustache = function(string, data){
|
$.fn.suggest_results.mustache = function(string, data){
|
||||||
@@ -263,16 +326,34 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
$.fn.suggest_results.defaults = {
|
$.fn.suggest_results.defaults = {
|
||||||
delay: 150,
|
url: null,
|
||||||
|
url_query_var: "search",
|
||||||
|
url_method: "get",
|
||||||
|
empty: false,
|
||||||
|
empty_label: "No Results",
|
||||||
|
name: "",
|
||||||
|
delay: 100,
|
||||||
limit: 6,
|
limit: 6,
|
||||||
data: null,
|
data: null,
|
||||||
exact_match: true,
|
exactMatch: true,
|
||||||
template: {
|
tpl_container_id: "suggest_results",
|
||||||
container_id: "suggest_results",
|
tpl_container: '<div id="{{id}}"><ol></ol></div>',
|
||||||
container: '<ol id="{{id}}"></ol>',
|
tpl_result_begin: '<li class="result {{class}}" id="{{id}}"><a href="{{href}}">',
|
||||||
result: '<li class="result {{class}}" id="{{id}}"><a href="{{href}}"><span class="title">{{title}}</span></a></li>',
|
tpl_result_body: '<span class="title">{{title}}</span>',
|
||||||
category: '<strong class="category {{class}}">{{category}}</strong>' //TODO add support for categories
|
tpl_result_end: '</a></li>',
|
||||||
}
|
tpl_label: '<li class="label {{class}}"{{label}}</li>' //TODO add support for labels/categories
|
||||||
};
|
};
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Crossbrowser hasOwnProperty solution, based on answers from:
|
||||||
|
http://stackoverflow.com/questions/135448/how-do-i-check-to-see-if-an-object-has-an-attribute-in-javascript
|
||||||
|
*/
|
||||||
|
if ( !Object.prototype.hasOwnProperty ) {
|
||||||
|
Object.prototype.hasOwnProperty = function(prop) {
|
||||||
|
var proto = obj.__proto__ || obj.constructor.prototype;
|
||||||
|
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user