mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
eol-style and mime-type
This commit is contained in:
Richard Worth
parent
2725bf3e2f
commit
8d87d06758
@ -1,94 +1,94 @@
|
||||
<!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.autocomplete.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
.ui-autocomplete-category {
|
||||
font-weight:bold;
|
||||
padding:.2em .4em;
|
||||
margin:.8em 0 .2em;
|
||||
line-height:1.5;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$.extend( $.ui.menu.prototype, {
|
||||
next: function() {
|
||||
this.move("next", ".ui-menu-item:first");
|
||||
},
|
||||
|
||||
previous: function() {
|
||||
this.move("prev", ".ui-menu-item:last");
|
||||
},
|
||||
|
||||
move: function(direction, edge) {
|
||||
if (!this.active) {
|
||||
this.activate(this.element.children(edge));
|
||||
return;
|
||||
}
|
||||
var next = this.active[direction + "All"]('.ui-menu-item').eq( 0 );
|
||||
if (next.length) {
|
||||
this.activate(next);
|
||||
} else {
|
||||
this.activate(this.element.children(edge));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.widget("custom.catcomplete", $.ui.autocomplete, {
|
||||
_renderMenu: function( ul, items ) {
|
||||
var self = this,
|
||||
currentCategory = "";
|
||||
$.each( items, function( index, item ) {
|
||||
if ( item.category != currentCategory ) {
|
||||
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
||||
currentCategory = item.category;
|
||||
}
|
||||
self._renderItem( ul, item );
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var data = [
|
||||
{ label: "anders", category: "" },
|
||||
{ label: "andreas", category: "" },
|
||||
{ label: "antal", category: "" },
|
||||
{ label: "annhhx10", category: "Products" },
|
||||
{ label: "annk K12", category: "Products" },
|
||||
{ label: "annttop C13", category: "Products" },
|
||||
{ label: "anders andersson", category: "People" },
|
||||
{ label: "andreas andersson", category: "People" },
|
||||
{ label: "andreas johnson", category: "People" }
|
||||
];
|
||||
|
||||
$('#search').catcomplete({
|
||||
delay: 0,
|
||||
source: data
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<label for="search">Search: </label>
|
||||
<input id="search" />
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A categorized search result. Try typing "a" or "n".
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!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.autocomplete.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
.ui-autocomplete-category {
|
||||
font-weight:bold;
|
||||
padding:.2em .4em;
|
||||
margin:.8em 0 .2em;
|
||||
line-height:1.5;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$.extend( $.ui.menu.prototype, {
|
||||
next: function() {
|
||||
this.move("next", ".ui-menu-item:first");
|
||||
},
|
||||
|
||||
previous: function() {
|
||||
this.move("prev", ".ui-menu-item:last");
|
||||
},
|
||||
|
||||
move: function(direction, edge) {
|
||||
if (!this.active) {
|
||||
this.activate(this.element.children(edge));
|
||||
return;
|
||||
}
|
||||
var next = this.active[direction + "All"]('.ui-menu-item').eq( 0 );
|
||||
if (next.length) {
|
||||
this.activate(next);
|
||||
} else {
|
||||
this.activate(this.element.children(edge));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.widget("custom.catcomplete", $.ui.autocomplete, {
|
||||
_renderMenu: function( ul, items ) {
|
||||
var self = this,
|
||||
currentCategory = "";
|
||||
$.each( items, function( index, item ) {
|
||||
if ( item.category != currentCategory ) {
|
||||
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
||||
currentCategory = item.category;
|
||||
}
|
||||
self._renderItem( ul, item );
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
var data = [
|
||||
{ label: "anders", category: "" },
|
||||
{ label: "andreas", category: "" },
|
||||
{ label: "antal", category: "" },
|
||||
{ label: "annhhx10", category: "Products" },
|
||||
{ label: "annk K12", category: "Products" },
|
||||
{ label: "annttop C13", category: "Products" },
|
||||
{ label: "anders andersson", category: "People" },
|
||||
{ label: "andreas andersson", category: "People" },
|
||||
{ label: "andreas johnson", category: "People" }
|
||||
];
|
||||
|
||||
$('#search').catcomplete({
|
||||
delay: 0,
|
||||
source: data
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<label for="search">Search: </label>
|
||||
<input id="search" />
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A categorized search result. Try typing "a" or "n".
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,69 +1,69 @@
|
||||
<!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.autocomplete.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
function log(message) {
|
||||
$("<div/>").text(message).prependTo("#log");
|
||||
$("#log").attr("scrollTop", 0);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "london.xml",
|
||||
dataType: "xml",
|
||||
success: function(xmlResponse) {
|
||||
var data = $("geoname", xmlResponse).map(function() {
|
||||
return {
|
||||
value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
|
||||
id: $("geonameId", this).text()
|
||||
};
|
||||
}).get();
|
||||
$("#birds").autocomplete({
|
||||
source: data,
|
||||
minLength: 0,
|
||||
select: function(event, ui) {
|
||||
log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">London matches: </label>
|
||||
<input id="birds" />
|
||||
</div>
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
Result:
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.
|
||||
</p>
|
||||
<p>
|
||||
This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!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.autocomplete.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
function log(message) {
|
||||
$("<div/>").text(message).prependTo("#log");
|
||||
$("#log").attr("scrollTop", 0);
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "london.xml",
|
||||
dataType: "xml",
|
||||
success: function(xmlResponse) {
|
||||
var data = $("geoname", xmlResponse).map(function() {
|
||||
return {
|
||||
value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
|
||||
id: $("geonameId", this).text()
|
||||
};
|
||||
}).get();
|
||||
$("#birds").autocomplete({
|
||||
source: data,
|
||||
minLength: 0,
|
||||
select: function(event, ui) {
|
||||
log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">London matches: </label>
|
||||
<input id="birds" />
|
||||
</div>
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
Result:
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.
|
||||
</p>
|
||||
<p>
|
||||
This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user