Permalink
Browse files

Autocomplete in and responding (beta).

  • Loading branch information...
1 parent ad8de6c commit 6efe29316aaad67e4119ee8048ba18e62a03e154 @raisinbread committed Feb 29, 2012
@@ -26,9 +26,10 @@ public function query() {
$results = Symbols::find('all', array(
'conditions' => array(
'name' => array(
- 'like' => $this->request->params['query'] . '%'
+ 'like' => '%' . $this->request->params['query'] . '%'
)
- )
+ ),
+ 'limit' => 10
));
$this->set(compact('results'));
}
@@ -23,7 +23,13 @@
<?php } ?>
<?=$this->html->link('Icon', null, array('type' => 'icon')); ?>
<?=$this->html->script('http://code.jquery.com/jquery-1.4.1.min.js'); ?>
- <?=$this->html->script(array('/li3_docs/js/showdown.min.js', '/li3_docs/js/highlight.pack.js')); ?>
+ <?=$this->html->script(array(
+ '/li3_docs/js/showdown.min.js',
+ '/li3_docs/js/highlight.pack.js',
+ '/li3_docs/js/search.js',
+ '/li3_docs/js/jquery-1.7.1.min.js',
+ '/li3_docs/js/jquery-ui-custom.min.js'
+ )); ?>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var converter = new Showdown.converter("/");
@@ -40,18 +46,12 @@
<body class="docs">
<div id="header">
<header>
- <h1>
- <?=$this->html->link(
- $t('<span class="triangle"></span> Lithium Docs', array('scope' => 'li3_docs')),
- array('controller' => 'li3_docs.ApiBrowser', 'action' => 'index'),
- array('escape' => false)
- ); ?>
- </h1>
<?=$this->html->link(
$t('<span class="home"></span>', array('scope' => 'li3_docs')),
array('controller' => 'li3_docs.ApiBrowser', 'action' => 'index'),
array('escape' => false, 'title' => 'Return to Lithium Docs home')
); ?>
+ <div id="search" data-webroot="<?= $this->url('/'); ?>" ><?= $this->form->text('query') ?></div>
@nateabele
nateabele Feb 29, 2012

Better idea: $this->url(array('controller' => 'li3_docs.ApiSearch', 'action' => 'query')), and in your responses, just send along the URL for each item with the display text. This keeps the JavaScript from having to know anything about how URLs are generated/handled.

</header>
</div>
@@ -386,15 +386,55 @@ span.type {
margin-top: 20px;
}
-<<<<<<< HEAD
#footer {
clear: both;
color: #E0E0E0;
}
-=======
->>>>>>> Trying out new presentation for li3_docs to coordinate with the test suite
.source-wrapper {
clear: both;
color: #ccc;
+}
+
+#search {
+ float: right;
+ margin: 15px;
+}
+
+#search input {
+ width: 400px;
+ font-size: 14px;
+ margin: 0;
+}
+
+#search input.active {
+ color: #454545;
+}
+
+.ui-autocomplete {
+ position: absolute;
+ cursor: default;
+ list-style-type: none;
+ background: #fff;
+ border-bottom: 1px solid #878787;
+ border-left: 1px solid #878787;
+ border-right: 1px solid #878787;
+}
+* html .ui-autocomplete { width:1px; }
+
+.ui-autocomplete li a {
+ padding: 4px 10px;
+ display:block;
+}
+
+.ui-state-hover {
+ -moz-border-radius: .35em;
+ -webkit-border-radius: .35em;
+ border-radius: .35em;
+ -webkit-box-shadow: inset 0 0 .25em rgba(0,0,0,.75);
+ -moz-box-shadow: inset 0 0 .25em rgba(0,0,0,.75);
+ box-shadow: inset 0 0 .25em rgba(0,0,0,.75);
+ background: #999;
+ color: white !important;
+ padding: 0.1em 0.3em;
}
Oops, something went wrong.
Oops, something went wrong.
View
@@ -0,0 +1,38 @@
+$(document).ready(function(event){
+ $('#search input').autocomplete({
+ source:getResults
+ });
+});
+
+function getResults(term, callback) {
+ var options = [];
+ $.get(
+ $('#search').data('webroot') + 'li3_docs/search/' + term.term,
+ function(data, status, xhr) {
+ for(i in data.results) {
+ options.push(createValue(
+ data.results[i]['class'],
+ data.results[i].type,
+ data.results[i].name
+ ));
+ }
+ callback(options);
+ },
+ 'json'
+ );
+}
+
+function createValue(className, type, name) {
+ var value = className;
+ switch(type) {
+ case 'method':
+ value += '::' + name + '()';
+ break;
+ case 'property':
+ value += '::$' + name;
+ break;
+ case 'class':
+ break;
+ }
+ return value;
+}

0 comments on commit 6efe293

Please sign in to comment.