r3328 committed - autocomplete: added remote-jspon visual test; improved close/change ev...
Revision: 3328
Author: joern.zaefferer
Date: Tue Sep 29 15:03:21 2009
Log: autocomplete: added remote-jspon visual test; improved close/change
event handling
http://code.google.com/p/jquery-ui/source/detail?r=3328
Added:
/branches/dev/tests/visual/autocomplete/remote-jsonp.html
Modified:
/branches/dev/ui/jquery.ui.autocomplete.js
=======================================
--- /dev/null
+++ /branches/dev/tests/visual/autocomplete/remote-jsonp.html Tue Sep 29
15:03:21 2009
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<head>
+ <title>Autocomplete Visual Test: Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.core.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>
+ <script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('<div/>').css({
+ position: "absolute",
+ right: 10,
+ top: 10
+ }).appendTo(document.body).themeswitcher();
+
+ function log(message) {
+ $("<div/>").text(message).prependTo("#log");
+ $("#log").attr("scrollTop", 0);
+ }
+
+ $("#city").autocomplete({
+ source: function(request, response) {
+ $.ajax({
+ url: "http://ws.geonames.org/searchJSON",
+ dataType: "jsonp",
+ data: {
+ featureClass: "P",
+ style: "full",
+ maxRows: 15,
+ name_startsWith: request.term
+ },
+ success: function(data) {
+ console.log(data.geonames)
+ response($.map(data.geonames, function(item) {
+ return {
+ label: item.name + (item.adminName1 ? ", " + item.adminName1 : "")
+ ", " + item.countryName,
+ result: item.name
+ }
+ }))
+ }
+ })
+ },
+ minLength: 2,
+ change: function(event, ui) {
+ log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected,
input was " + this.value);
+ }
+ }).focus();
+ });
+ </script>
+ <style>body { font-size:62.5%; }</style>
+</head>
+<body>
+
+<div class="ui-widget">
+ <label for="city">Your city: </label>
+ <input class="ui-widget ui-widget-content ui-corner-all" id="city" />
+ Powered by <a href="http://geonames.org">geonames.org</a>
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+ Log:
+ <div id="log" style="height: 400px; width: 300px; overflow: auto;"
class="ui-widget-content"></div>
+</div>
+
+</body>
+</html>
=======================================
--- /branches/dev/ui/jquery.ui.autocomplete.js Tue Sep 29 14:43:01 2009
+++ /branches/dev/ui/jquery.ui.autocomplete.js Tue Sep 29 15:03:21 2009
@@ -90,8 +90,6 @@
if (result) {
response(result);
}
- } else {
- this.close();
}
},
@@ -142,6 +140,10 @@
var data = ui.item.data("item.autocomplete");
self.element.val( data.result );
self.close({ item: data });
+ // prevent the blur handler from triggering another change event
+ self.previous = data.result;
+ // TODO only trigger when focus was lost?
+ self.element.focus();
}
}).position({
my: "left top",