mirror of
https://github.com/jimeh/fancy_input.git
synced 2026-02-19 03:26:40 +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 */
|
||||
|
||||
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 {
|
||||
border: 1px solid #999;
|
||||
width: 200px;
|
||||
padding: 3px 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 960px;
|
||||
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 {
|
||||
background: #fbfbfb;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #efefef;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#suggest_results ol {
|
||||
background: #fbfbfb;
|
||||
border: 1px solid #bbb;
|
||||
border-top: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
#suggest_results li {
|
||||
margin: 0px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#suggest_results li.first {
|
||||
|
||||
}
|
||||
#suggest_results li.last {
|
||||
border-bottom: none;
|
||||
}
|
||||
#suggest_results li.result {
|
||||
display: block;
|
||||
}
|
||||
#suggest_results li.result a {
|
||||
display: block;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
#suggest_results li.result a:hover,
|
||||
#suggest_results li.result.selected a {
|
||||
background: #698DE5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#suggest_results li {
|
||||
margin: 0px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#suggest_results li.result {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#suggest_results li.first {
|
||||
|
||||
}
|
||||
|
||||
#suggest_results li.last {
|
||||
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);
|
||||
|
||||
var BACKSPACE = 8;
|
||||
var RETURN = 13;
|
||||
var ESC = 27;
|
||||
var ARRUP = 38;
|
||||
var ARRDN = 40;
|
||||
var SPECIALS_END = 45;
|
||||
|
||||
return this.each(function(){
|
||||
var $e = $(this);
|
||||
$e.focus(function(){
|
||||
self.attach($e, options);
|
||||
self.attach($e, $options);
|
||||
if ($e.val().length > 0) {
|
||||
self.search_timeout = self.setTimeout(function(){
|
||||
self.search($e, $options);
|
||||
@@ -17,59 +24,75 @@
|
||||
}).blur(function(){
|
||||
self.hide();
|
||||
}).keydown(function(e){
|
||||
var RETURN = 13;
|
||||
var ESC = 27;
|
||||
var ARRUP = 38;
|
||||
var ARRDN = 40;
|
||||
switch(e.keyCode) {
|
||||
case ARRUP: self.select_prev($e, $options); return false;
|
||||
case ARRDN: self.select_next($e, $options); return false;
|
||||
case ESC: self.clear($e, $options); break;
|
||||
case RETURN: self.activate_selected($options); return false;
|
||||
default:
|
||||
self.clearTimeout();
|
||||
self.search($e, $options);
|
||||
default: 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.list = null;
|
||||
$.fn.suggest_results.attached_to = null;
|
||||
$.fn.suggest_results.current_results = [];
|
||||
$.fn.suggest_results.selected_result = null;
|
||||
$.fn.suggest_results.timeout = null;
|
||||
$.fn.suggest_results.query_cache = [];
|
||||
|
||||
$.fn.suggest_results.init = function(options){
|
||||
var self = $.fn.suggest_results;
|
||||
self.box = $("#" + options.template.container_id);
|
||||
self.box = $("#" + options.tpl_container_id);
|
||||
if (self.box.length == 0) {
|
||||
$("body").append(self.mustache(options.template.container, {id: options.template.container_id}));
|
||||
self.box = $("#" + options.template.container_id);
|
||||
$("body").append(self.mustache(options.tpl_container, {id: options.tpl_container_id}));
|
||||
self.box = $("#" + options.tpl_container_id);
|
||||
self.list = $("ol", self.box);
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.suggest_results.search = function(elm, options){
|
||||
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 !== "") {
|
||||
//TODO support fetching results from server-side
|
||||
self.query_for_data(elm, options);
|
||||
} else {
|
||||
var results = self.filter_data(terms, options.data, options);
|
||||
};
|
||||
self.current_results = results;
|
||||
if (results.length > 0) {
|
||||
self.render(results, options);
|
||||
self.show();
|
||||
} else {
|
||||
self.hide();
|
||||
self.current_results = self.filter_data(terms, options.data, options);
|
||||
self.prerender(self.current_results, options);
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.suggest_results.clear = function(elm, options){
|
||||
var self = $.fn.suggest_results;
|
||||
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){
|
||||
@@ -77,14 +100,16 @@
|
||||
var results_length = results.length;
|
||||
var html = "";
|
||||
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 == 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.box.append(html);
|
||||
$(".result", self.box).click(function(){
|
||||
self.list.html("");
|
||||
self.list.append(html);
|
||||
$(".result", self.list).click(function(){
|
||||
self.redirect_to($("a", $(this)).attr("href"));
|
||||
});
|
||||
};
|
||||
@@ -93,6 +118,7 @@
|
||||
var self = $.fn.suggest_results;
|
||||
var elm_uid = self.elm_uid(elm);
|
||||
if (elm_uid !== self.attached_to) {
|
||||
self.box.hide().attr("class", options.name);
|
||||
var offset = elm.offset();
|
||||
|
||||
// left offset
|
||||
@@ -112,7 +138,6 @@
|
||||
width -= parseInt(self.box.css("border-left-width"), 10) + parseInt(self.box.css("border-right-width"), 10);
|
||||
self.box.css("width", width + "px");
|
||||
};
|
||||
|
||||
self.attached_to = elm_uid;
|
||||
};
|
||||
};
|
||||
@@ -121,12 +146,14 @@
|
||||
$.fn.suggest_results.box.show();
|
||||
};
|
||||
|
||||
$.fn.suggest_results.hide = function(){
|
||||
$.fn.suggest_results.hide = function(delay){
|
||||
var self = $.fn.suggest_results;
|
||||
if (typeof(delay) !== "number") { delay = 250; };
|
||||
self.selected_result = null;
|
||||
self.setTimeout(function(){
|
||||
self.selected_result = null;
|
||||
self.box.hide();
|
||||
}, 500);
|
||||
}, delay);
|
||||
};
|
||||
|
||||
$.fn.suggest_results.select_next = function(elm, options){
|
||||
@@ -140,6 +167,10 @@
|
||||
$(".selected", self.box).removeClass("selected");
|
||||
self.selected_result++;
|
||||
$("#suggested_result_" + self.selected_result, self.box).addClass("selected");
|
||||
} else {
|
||||
$(".selected", self.box).removeClass("selected");
|
||||
self.selected_result = null;
|
||||
elm.putCursorAtEnd();
|
||||
};
|
||||
};
|
||||
return false;
|
||||
@@ -199,12 +230,44 @@
|
||||
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){
|
||||
var uid = "";
|
||||
if ( elm.attr("id") !== "" ) { uid += "#" + elm.attr("id"); };
|
||||
if ( elm.attr("class") !== "" ) { uid += "." + elm.attr("class"); };
|
||||
if ( elm.attr("name") !== "" ) { uid += "[" + elm.attr("name") + "]"; };
|
||||
return uid;
|
||||
if (elm.attr("id") !== "") {
|
||||
return "#" + elm.attr("id");
|
||||
} else if (elm.attr("class") !== "") {
|
||||
return "." + elm.attr("class");
|
||||
} else if (elm.attr("name") !== "") {
|
||||
return "!" + elm.attr("name");
|
||||
};
|
||||
return "";
|
||||
};
|
||||
|
||||
$.fn.suggest_results.mustache = function(string, data){
|
||||
@@ -263,16 +326,34 @@
|
||||
};
|
||||
|
||||
$.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,
|
||||
data: null,
|
||||
exact_match: true,
|
||||
template: {
|
||||
container_id: "suggest_results",
|
||||
container: '<ol id="{{id}}"></ol>',
|
||||
result: '<li class="result {{class}}" id="{{id}}"><a href="{{href}}"><span class="title">{{title}}</span></a></li>',
|
||||
category: '<strong class="category {{class}}">{{category}}</strong>' //TODO add support for categories
|
||||
}
|
||||
exactMatch: true,
|
||||
tpl_container_id: "suggest_results",
|
||||
tpl_container: '<div id="{{id}}"><ol></ol></div>',
|
||||
tpl_result_begin: '<li class="result {{class}}" id="{{id}}"><a href="{{href}}">',
|
||||
tpl_result_body: '<span class="title">{{title}}</span>',
|
||||
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