Skip to content

Instantly share code, notes, and snippets.

@hiroprotagonist
Created May 26, 2011 15:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hiroprotagonist/993325 to your computer and use it in GitHub Desktop.
Save hiroprotagonist/993325 to your computer and use it in GitHub Desktop.
An Instant Search like widget
(function($, window, undefined) {
$.widget("mobile.instantsearch", $.mobile.widget, {
si: undefined, //search inupt
rd: undefined, //result div
timeout: undefined,
options: {
delay: 500
},
_init: function() {
this.rd= $("<div>");
this.element.after(this.rd);
this.si= this.element.find(":jqmData(type='search')");
this.element.submit(function() {
return false;
});
this.element.bind('keyup', $.proxy(this.delaysearch, this));
},
delaysearch: function() {
if(typeof this.timeout !== 'undefined') {
window.clearTimeout(this.timeout);
}
this.timeout= window.setTimeout($.proxy(this.submit, this), this.options.delay);
},
submit: function() {
console.log(this);
$.ajax({
url: this.element.attr('action'),
context: this,
dataType: 'html',
type: this.element.attr('method'),
data: this.element.serialize(),
success: function(html) {
var ul= $(html);
this.rd.html(ul);
this.rd.children('ul').listview();
}
});
}
});
$(":jqmData(role='page')").live("pagecreate", function() {
$(":jqmData(role='instantsearch')", this).each(function() {
$(this).instantsearch();
});
});
}) (jQuery, this);
<!-- Main Search Page -->
<div data-role="page">
<div data-role="header">
<h1>I.S. Test-Site</h1>
</div><!-- /header -->
<div data-role="content">
<form data-role="instantsearch" method="get" action="search">
<!-- visible part -->
<input name="q" type="search" autocomplete="off"/>
<!-- additional hidden data -->
<input type="hidden" name="format" value="snippet"/>
<input type="hidden" name="model.facetMode" value="none"/>
</form>
</div><!-- /content -->
</div><!-- /page -->
<!-- Search Result -->
<ul data-role="listview" data-inset="true">
<li><a href="http://www.google.de" data-rel="external">Google.de</a></li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment