<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Custom Data Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Categories</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
.ui-autocomplete-category {
- font-weight:bold;
- padding:.2em .4em;
- margin:.8em 0 .2em;
- line-height:1.5;
+ font-weight: bold;
+ padding: .2em .4em;
+ margin: .8em 0 .2em;
+ line-height: 1.5;
}
</style>
- <script type="text/javascript">
- $.widget("custom.catcomplete", $.ui.autocomplete, {
+ <script>
+ $.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Combobox Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- /* TODO shouldn't be necessary */
- .ui-button { margin-left: -1px; }
- .ui-button-icon-only .ui-button-text { padding: 0.35em; }
- .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Combobox</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-button { margin-left: -1px; }
+ .ui-button-icon-only .ui-button-text { padding: 0.35em; }
+ .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
</style>
- <script type="text/javascript">
- (function($) {
- $.widget("ui.combobox", {
+ <script>
+ (function( $ ) {
+ $.widget( "ui.combobox", {
_create: function() {
- var self = this;
- var select = this.element.hide();
- var input = $("<input>")
- .insertAfter(select)
+ var self = this,
+ select = this.element.hide(),
+ selected = select.children( ":selected" ),
+ value = selected.val() ? selected.text() : "";
+ var input = this.input = $( "<input>" )
+ .insertAfter( select )
+ .val( value )
.autocomplete({
- source: function(request, response) {
- var matcher = new RegExp(request.term, "i");
- response(select.children("option").map(function() {
- var text = $(this).text();
- if (this.value && (!request.term || matcher.test(text)))
+ delay: 0,
+ minLength: 0,
+ source: function( request, response ) {
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+ response( select.children( "option" ).map(function() {
+ var text = $( this ).text();
+ if ( this.value && ( !request.term || matcher.test(text) ) )
return {
- id: this.value,
- label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
- value: text
+ label: text.replace(
+ new RegExp(
+ "(?![^&;]+;)(?!<[^<>]*)(" +
+ $.ui.autocomplete.escapeRegex(request.term) +
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"
+ ), "<strong>$1</strong>" ),
+ value: text,
+ option: this
};
- }));
+ }) );
},
- delay: 0,
- change: function(event, ui) {
- if (!ui.item) {
- // remove invalid value, as it didn't match anything
- $(this).val("");
- return false;
- }
- select.val(ui.item.id);
- self._trigger("selected", event, {
- item: select.find("[value='" + ui.item.id + "']")
+ select: function( event, ui ) {
+ ui.item.option.selected = true;
+ self._trigger( "selected", event, {
+ item: ui.item.option
});
-
},
- minLength: 0
+ change: function( event, ui ) {
+ if ( !ui.item ) {
+ var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
+ valid = false;
+ select.children( "option" ).each(function() {
+ if ( $( this ).text().match( matcher ) ) {
+ this.selected = valid = true;
+ return false;
+ }
+ });
+ if ( !valid ) {
+ // remove invalid value, as it didn't match anything
+ $( this ).val( "" );
+ select.val( "" );
+ input.data( "autocomplete" ).term = "";
+ return false;
+ }
+ }
+ }
+ })
+ .addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+ input.data( "autocomplete" )._renderItem = function( ul, item ) {
+ return $( "<li></li>" )
+ .data( "item.autocomplete", item )
+ .append( "<a>" + item.label + "</a>" )
+ .appendTo( ul );
+ };
+
+ this.button = $( "<button type='button'> </button>" )
+ .attr( "tabIndex", -1 )
+ .attr( "title", "Show All Items" )
+ .insertAfter( input )
+ .button({
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ },
+ text: false
})
- .addClass("ui-widget ui-widget-content ui-corner-left");
- $("<button> </button>")
- .attr("tabIndex", -1)
- .attr("title", "Show All Items")
- .insertAfter(input)
- .button({
- icons: {
- primary: "ui-icon-triangle-1-s"
- },
- text: false
- }).removeClass("ui-corner-all")
- .addClass("ui-corner-right ui-button-icon")
- .click(function() {
- // close if already visible
- if (input.autocomplete("widget").is(":visible")) {
- input.autocomplete("close");
- return;
- }
- // pass empty string as value to search for, displaying all results
- input.autocomplete("search", "");
- input.focus();
- });
+ .removeClass( "ui-corner-all" )
+ .addClass( "ui-corner-right ui-button-icon" )
+ .click(function() {
+ // close if already visible
+ if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
+ input.autocomplete( "close" );
+ return;
+ }
+
+ // pass empty string as value to search for, displaying all results
+ input.autocomplete( "search", "" );
+ input.focus();
+ });
+ },
+
+ destroy: function() {
+ this.input.remove();
+ this.button.remove();
+ this.element.show();
+ $.Widget.prototype.destroy.call( this );
}
});
+ })( jQuery );
- })(jQuery);
-
$(function() {
- $("#combobox").combobox();
- $("#toggle").click(function() {
- $("#combobox").toggle();
+ $( "#combobox" ).combobox();
+ $( "#toggle" ).click(function() {
+ $( "#combobox" ).toggle();
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Custom Data Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Custom data and display</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
#project-label {
display: block;
font-weight: bold;
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Default Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
- $("#tags").autocomplete({
+ var availableTags = [
+ "ActionScript",
+ "AppleScript",
+ "Asp",
+ "BASIC",
+ "C",
+ "C++",
+ "Clojure",
+ "COBOL",
+ "ColdFusion",
+ "Erlang",
+ "Fortran",
+ "Groovy",
+ "Haskell",
+ "Java",
+ "JavaScript",
+ "Lisp",
+ "Perl",
+ "PHP",
+ "Python",
+ "Ruby",
+ "Scala",
+ "Scheme"
+ ];
+ $( "#tags" ).autocomplete({
source: availableTags
});
});
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Accent Folding Demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Accent folding</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete multiple demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
++<<<<<<< HEAD
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Multiple, remote</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+ </style>
+ <script>
$(function() {
- function split(val) {
- return val.split(/,\s*/);
+ function split( val ) {
+ return val.split( /,\s*/ );
}
- function extractLast(term) {
- return split(term).pop();
+ function extractLast( term ) {
+ return split( term ).pop();
}
-
- $("#birds").autocomplete({
- source: function(request, response) {
- $.getJSON("search.php", {
- term: extractLast(request.term)
- }, response);
- },
- search: function() {
- // custom minLength
- var term = extractLast(this.value);
- if (term.length < 2) {
+
+ $( "#birds" )
+ // don't navigate away from the field on tab when selecting an item
+ .bind( "keydown", function( event ) {
+ if ( event.keyCode === $.ui.keyCode.TAB &&
+ $( this ).data( "autocomplete" ).menu.active ) {
+ event.preventDefault();
+ }
+ })
+ .autocomplete({
+ source: function( request, response ) {
+ $.getJSON( "search.php", {
+ term: extractLast( request.term )
+ }, response );
+ },
+ search: function() {
+ // custom minLength
+ var term = extractLast( this.value );
+ if ( term.length < 2 ) {
+ return false;
+ }
+ },
+ focus: function() {
+ // prevent value inserted on focus
+ return false;
+ },
+ select: function( event, ui ) {
+ var terms = split( this.value );
+ // remove the current input
+ terms.pop();
+ // add the selected item
+ terms.push( ui.item.value );
+ // add placeholder to get the comma-and-space at the end
+ terms.push( "" );
+ this.value = terms.join( ", " );
return false;
}
- },
- focus: function() {
- // prevent value inserted on focus
- return false;
- },
- select: function(event, ui) {
- var terms = split( this.value );
- // remove the current input
- terms.pop();
- // add the selected item
- terms.push( ui.item.value );
- // add placeholder to get the comma-and-space at the end
- terms.push("");
- this.value = terms.join(", ");
- return false;
- }
- });
+ });
});
</script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete multiple demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Multiple values</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
- function split(val) {
- return val.split(/,\s*/);
+ var availableTags = [
+ "ActionScript",
+ "AppleScript",
+ "Asp",
+ "BASIC",
+ "C",
+ "C++",
+ "Clojure",
+ "COBOL",
+ "ColdFusion",
+ "Erlang",
+ "Fortran",
+ "Groovy",
+ "Haskell",
+ "Java",
+ "JavaScript",
+ "Lisp",
+ "Perl",
+ "PHP",
+ "Python",
+ "Ruby",
+ "Scala",
+ "Scheme"
+ ];
+ function split( val ) {
+ return val.split( /,\s*/ );
}
- function extractLast(term) {
- return split(term).pop();
+ function extractLast( term ) {
+ return split( term ).pop();
}
-
- $("#tags").autocomplete({
- minLength: 0,
- source: function(request, response) {
- // delegate back to autocomplete, but extract the last term
- response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
- },
- focus: function() {
- // prevent value inserted on focus
- return false;
- },
- select: function(event, ui) {
- var terms = split( this.value );
- // remove the current input
- terms.pop();
- // add the selected item
- terms.push( ui.item.value );
- // add placeholder to get the comma-and-space at the end
- terms.push("");
- this.value = terms.join(", ");
- return false;
- }
- });
+
+ $( "#tags" )
+ // don't navigate away from the field on tab when selecting an item
+ .bind( "keydown", function( event ) {
+ if ( event.keyCode === $.ui.keyCode.TAB &&
+ $( this ).data( "autocomplete" ).menu.active ) {
+ event.preventDefault();
+ }
+ })
+ .autocomplete({
+ minLength: 0,
+ source: function( request, response ) {
+ // delegate back to autocomplete, but extract the last term
+ response( $.ui.autocomplete.filter(
+ availableTags, extractLast( request.term ) ) );
+ },
+ focus: function() {
+ // prevent value inserted on focus
+ return false;
+ },
+ select: function( event, ui ) {
+ var terms = split( this.value );
+ // remove the current input
+ terms.pop();
+ // add the selected item
+ terms.push( ui.item.value );
+ // add placeholder to get the comma-and-space at the end
+ terms.push( "" );
+ this.value = terms.join( ", " );
+ return false;
+ }
+ });
});
</script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Remote JSONP datasource demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+ #city { width: 25em; }
+ </style>
+ <script>
$(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
+ function log( message ) {
+ $( "<div/>" ).text( message ).prependTo( "#log" );
+ $( "#log" ).attr( "scrollTop", 0 );
}
-
- $("#city").autocomplete({
- source: function(request, response) {
+
+ $( "#city" ).autocomplete({
+ source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Remote with caching demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Remote with caching</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+ </style>
+ <script>
$(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
- }
-
- var cache = {};
- $("#birds").autocomplete({
- source: function(request, response) {
- if (cache.term == request.term && cache.content) {
- response(cache.content);
- return;
- }
- if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) {
- response($.ui.autocomplete.filter(cache.content, request.term));
+ var cache = {},
+ lastXhr;
+ $( "#birds" ).autocomplete({
+ minLength: 2,
+ source: function( request, response ) {
+ var term = request.term;
+ if ( term in cache ) {
+ response( cache[ term ] );
return;
}
- $.ajax({
- url: "search.php",
- dataType: "json",
- data: request,
- success: function(data) {
- cache.term = request.term;
- cache.content = data;
- response(data);
+
+ lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
+ cache[ term ] = data;
+ if ( xhr === lastXhr ) {
+ response( data );
}
});
- },
- minLength: 2,
- select: function(event, ui) {
- log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Remote datasource demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - Remote datasource</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+ </style>
+ <script>
$(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
+ function log( message ) {
+ $( "<div/>" ).text( message ).prependTo( "#log" );
+ $( "#log" ).attr( "scrollTop", 0 );
}
-
- $("#birds").autocomplete({
+
+ $( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
- select: function(event, ui) {
- log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
+ select: function( event, ui ) {
+ log( ui.item ?
+ "Selected: " + ui.item.value + " aka " + ui.item.id :
+ "Nothing selected, input was " + this.value );
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Autocomplete Remote datasource demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Autocomplete - XML data parsed once</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+ </style>
+ <script>
$(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
+ function log( message ) {
+ $( "<div/>" ).text( message ).prependTo( "#log" );
+ $( "#log" ).attr( "scrollTop", 0 );
}
-
+
$.ajax({
url: "london.xml",
dataType: "xml",
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <title>jQuery UI Button - Default demo</title>
- <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
+ <meta charset="utf-8">
+ <title>jQuery UI Button - Split button</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.4.4.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
++ <script src="../../ui/jquery.ui.position.js"></script>
++ <script src="../../ui/jquery.ui.menu.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
$(function() {
- $("#rerun")
+ $( "#rerun" )
.button()
- .click( function() {
+ .click(function() {
alert( "Running the last action" );
})
- .next()
- .button( {
- text: false,
- icons: {
- primary: "ui-icon-triangle-1-s"
- }
- })
- .click(function() {
- alert( "Could display a menu to select an action" );
- })
- .parent()
- .buttonset();
+ .next()
+ .button( {
+ text: false,
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ }
+ })
+ .click( function() {
+ var menu = $(this).parent().next().show().position({
+ my: "left top",
+ at: "left bottom",
+ of: this
+ });
+ $(document).one("click", function() {
+ menu.hide();
+ });
+ return false;
+ })
+ .parent()
+ .buttonset()
+ .next()
+ .hide()
+ .menu();
});
</script>
<style>
<div class="demo-description">
- <p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p>
+
+ <p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
+ and no text. Both are grouped together in a set.</p>
+
</div><!-- End demo-description -->
-
-
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta charset="utf-8">
<title>jQuery UI Demos</title>
- <link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" />
- <link type="text/css" href="demos.css" rel="stylesheet" />
- <script type="text/javascript" src="../jquery-1.4.2.js"></script>
- <script type="text/javascript" src="../external/jquery.bgiframe-2.1.1.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.mouse.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.accordion.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.autocomplete.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.datepicker.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.dialog.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.droppable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.progressbar.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.resizable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.selectable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.slider.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.sortable.js"></script>
- <script type="text/javascript" src="../ui/jquery.ui.tabs.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.core.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.blind.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.bounce.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.clip.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.drop.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.explode.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.fold.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.highlight.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.pulsate.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.scale.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.shake.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.slide.js"></script>
- <script type="text/javascript" src="../ui/jquery.effects.transfer.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
- <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
- <script type="text/javascript">
- jQuery(function($) {
+ <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
+ <link rel="stylesheet" href="demos.css">
+ <script src="../jquery-1.4.4.js"></script>
+ <script src="../external/jquery.bgiframe-2.1.2.js"></script>
+ <script src="../external/glob.js"></script>
+ <script src="../external/glob.de-DE.js"></script>
+ <script src="../ui/jquery.ui.core.js"></script>
+ <script src="../ui/jquery.ui.widget.js"></script>
+ <script src="../ui/jquery.ui.mouse.js"></script>
+ <script src="../ui/jquery.ui.accordion.js"></script>
+ <script src="../ui/jquery.ui.autocomplete.js"></script>
+ <script src="../ui/jquery.ui.button.js"></script>
+ <script src="../ui/jquery.ui.datepicker.js"></script>
+ <script src="../ui/jquery.ui.dialog.js"></script>
+ <script src="../ui/jquery.ui.draggable.js"></script>
+ <script src="../ui/jquery.ui.droppable.js"></script>
++ <script src="../ui/jquery.ui.menu.js"></script>
+ <script src="../ui/jquery.ui.position.js"></script>
+ <script src="../ui/jquery.ui.progressbar.js"></script>
+ <script src="../ui/jquery.ui.resizable.js"></script>
+ <script src="../ui/jquery.ui.selectable.js"></script>
+ <script src="../ui/jquery.ui.slider.js"></script>
+ <script src="../ui/jquery.ui.sortable.js"></script>
+ <script src="../ui/jquery.ui.spinner.js"></script>
+ <script src="../ui/jquery.ui.tabs.js"></script>
+ <script src="../ui/jquery.effects.core.js"></script>
+ <script src="../ui/jquery.effects.blind.js"></script>
+ <script src="../ui/jquery.effects.bounce.js"></script>
+ <script src="../ui/jquery.effects.clip.js"></script>
+ <script src="../ui/jquery.effects.drop.js"></script>
+ <script src="../ui/jquery.effects.explode.js"></script>
+ <script src="../ui/jquery.effects.fold.js"></script>
+ <script src="../ui/jquery.effects.highlight.js"></script>
+ <script src="../ui/jquery.effects.pulsate.js"></script>
+ <script src="../ui/jquery.effects.scale.js"></script>
+ <script src="../ui/jquery.effects.shake.js"></script>
+ <script src="../ui/jquery.effects.slide.js"></script>
+ <script src="../ui/jquery.effects.transfer.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-kz.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
+ <script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
+ <script>
+ $(function() {
$('.left-nav a').click(function(ev) {
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
<dd><a href="button/index.html">Button</a></dd>
<dd><a href="datepicker/index.html">Datepicker</a></dd>
<dd><a href="dialog/index.html">Dialog</a></dd>
+ <dd><a href="menu/index.html">Menu</a></dd>
<dd><a href="progressbar/index.html">Progressbar</a></dd>
<dd><a href="slider/index.html">Slider</a></dd>
+ <dd><a href="spinner/index.html">Spinner</a></dd>
<dd><a href="tabs/index.html">Tabs</a></dd>
<dt>Effects</dt>
<dd><a href="animate/index.html">Color Animation</a></dd>
<li><a href="button/button.html">Button</a></li>
<li><a href="datepicker/datepicker.html">Datepicker</a></li>
<li><a href="dialog/dialog.html">Dialog</a></li>
+ <li>
+ <a href="menu/menu.html">Menu</a>
+ <ul>
+ <li><a href="menu/contextmenu.html">Context Menu</a></li>
+ <li><a href="menu/nested.html">Nested Menu</a></li>
+ <li><a href="menu/drilldown.html">Drilldown Menu</a></li>
+ </ul>
+ </li>
<li><a href="progressbar/progressbar.html">Progressbar</a></li>
<li><a href="slider/slider.html">Slider</a></li>
+ <li><a href="spinner/spinner.html">Spinner</a></li>
<li><a href="tabs/tabs.html">Tabs</a></li>
</ul>
<title>Menu Visual Test: Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
- <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../../jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
- <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript">
$(function() {
$.fn.themeswitcher && $('<div/>').css({
@import url("jquery.ui.button.css");
@import url("jquery.ui.datepicker.css");
@import url("jquery.ui.dialog.css");
+ @import url("jquery.ui.menu.css");
@import url("jquery.ui.progressbar.css");
@import url("jquery.ui.resizable.css");
+@import url("jquery.ui.selectable.css");
@import url("jquery.ui.slider.css");
+@import url("jquery.ui.spinner.css");
@import url("jquery.ui.tabs.css");
* jquery.ui.core.js
* jquery.ui.widget.js
* jquery.ui.position.js
+ * jquery.ui.menu.js
*/
-(function( $ ) {
+(function( $, undefined ) {
$.widget( "ui.autocomplete", {
options: {
};
this.menu = $( "<ul></ul>" )
.addClass( "ui-autocomplete" )
- .appendTo( "body", doc )
+ .appendTo( $( this.options.appendTo || "body", doc )[0] )
+ // prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
+ .mousedown(function( event ) {
+ // clicking on the scrollbar causes focus to shift to the body
+ // but we can't detect a mouseup or a click immediately afterward
+ // so we have to track the next mousedown and close the menu if
+ // the user clicks somewhere outside of the autocomplete
+ var menuElement = self.menu.element[ 0 ];
+ if ( !$( event.target ).closest( ".ui-menu-item" ).length ) {
+ setTimeout(function() {
+ $( document ).one( 'mousedown', function( event ) {
+ if ( event.target !== self.element[ 0 ] &&
+ event.target !== menuElement &&
+ !$.contains( menuElement, event.target ) ) {
+ self.close();
+ }
+ });
+ }, 1 );
+ }
+
+ // use another timeout to make sure the blur-event-handler on the input was already triggered
+ setTimeout(function() {
+ clearTimeout( self.closing );
+ }, 13);
+ })
.menu({
+ // custom key handling for now
+ input: $(),
focus: function( event, ui ) {
var item = ui.item.data( "item.autocomplete" );
- if ( false !== self._trigger( "focus", null, { item: item } ) ) {
+ if ( false !== self._trigger( "focus", event, { item: item } ) ) {
// use value to match what will end up in the input, if it was a key event
if ( /^key/.test(event.originalEvent.type) ) {
self.element.val( item.value );
}
}
},
- selected: function( event, ui ) {
+ select: function( event, ui ) {
- var item = ui.item.data( "item.autocomplete" );
- if ( false !== self._trigger( "select", event, { item: item } ) ) {
- self.element.val( item.value );
- }
- self.close( event );
+ var item = ui.item.data( "item.autocomplete" ),
+ previous = self.previous;
+
// only trigger when focus was lost (click on menu)
- var previous = self.previous;
if ( self.element[0] !== doc.activeElement ) {
self.element.focus();
self.previous = previous;
projects / jquery-ui.git / commitdiff