github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Autocomplete: Update demos to use AMD

Browse Source 
Ref #10119
This commit is contained in:
Alexander Schmitz
2015-06-30 15:22:59 -04:00
parent 9484718a00
commit 0935c9af36
12 changed files with 45 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
demos/autocomplete/categories.html
View File

@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Categories</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-category {
@@ -19,31 +13,29 @@
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
</script>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
@@ -60,7 +52,6 @@
delay: 0,
source: data
});
});
</script>
</head>
<body>

15
demos/autocomplete/combobox.html
View File

@@ -4,14 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Combobox</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<script src="../../ui/tooltip.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.custom-combobox {
@@ -30,8 +22,8 @@
padding: 5px 10px;
}
</style>
<script>
(function( $ ) {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="tooltip button">
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
@@ -161,14 +153,11 @@
this.element.show();
}
});
})( jQuery );
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).on( "click", function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>

11
demos/autocomplete/custom-data.html
View File

@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#project-label {
@@ -27,8 +21,8 @@
padding: 0;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var projects = [
{
value: "jquery",
@@ -71,7 +65,6 @@
.append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
.appendTo( ul );
};
});
</script>
</head>
<body>

11
demos/autocomplete/default.html
View File

@@ -4,15 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var availableTags = [
"ActionScript",
"AppleScript",
@@ -40,7 +34,6 @@
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>

11
demos/autocomplete/folding.html
View File

@@ -4,15 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Accent folding</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
var accentMap = {
@@ -36,7 +30,6 @@
}) );
}
});
});
</script>
</head>
<body>

11
demos/autocomplete/maxheight.html
View File

@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Scrollable results</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete {
@@ -25,8 +19,8 @@
height: 100px;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var availableTags = [
"ActionScript",
"AppleScript",
@@ -54,7 +48,6 @@
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>

11
demos/autocomplete/multiple-remote.html
View File

@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple, remote</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../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() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function split( val ) {
return val.split( /,\s*/ );
}
@@ -62,7 +56,6 @@
return false;
}
});
});
</script>
</head>
<body>

11
demos/autocomplete/multiple.html
View File

@@ -4,15 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var availableTags = [
"ActionScript",
"AppleScript",
@@ -75,7 +69,6 @@
return false;
}
});
});
</script>
</head>
<body>

11
demos/autocomplete/remote-jsonp.html
View File

@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
@@ -17,8 +11,8 @@
}
#city { width: 25em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
@@ -44,7 +38,6 @@
log( "Selected: " + ui.item.label );
}
} );
} );
</script>
</head>
<body>

11
demos/autocomplete/remote-with-cache.html
View File

@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote with caching</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../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() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var cache = {};
$( "#birds" ).autocomplete({
minLength: 2,
@@ -34,7 +28,6 @@
});
}
});
});
</script>
</head>
<body>

11
demos/autocomplete/remote.html
View File

@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote datasource</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../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() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
@@ -32,7 +26,6 @@
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>

11
demos/autocomplete/xml.html
View File

@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - XML data parsed once</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../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() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
@@ -45,7 +39,6 @@
});
}
});
});
</script>
</head>
<body>