From e7882fa393dcd5effb8a8997f99622ab88774cad Mon Sep 17 00:00:00 2001
From: jzaefferer <joern.zaefferer@gmail.com>
Date: Thu, 8 Apr 2010 23:41:49 +0200
Subject: Use tooltip to display hint when combobox input doesn't match
 anything

---
 demos/autocomplete/combobox.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

(limited to 'demos/autocomplete')

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 3001f7d17..596423bc9 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -10,6 +10,7 @@
 	<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.autocomplete.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<style type="text/css">
 		/* TODO shouldn't be necessary */
@@ -41,8 +42,12 @@
 						delay: 0,
 						change: function(event, ui) {
 							if (!ui.item) {
-								// remove invalid value, as it didn't match anything
-								$(this).val("");
+								var value = this.value;
+								// remove invalid value, as it didn't match anything, and display a hint
+								$(this).val("").attr("title", value + " didn't match any item").tooltip("open");
+								setTimeout(function() {
+									input.tooltip("close").attr("title", "");
+								}, 2500);
 								return false;
 							}
 							select.val(ui.item.id);
@@ -54,7 +59,7 @@
 						minLength: 0
 					})
 					.addClass("ui-widget ui-widget-content ui-corner-left");
-				$("<button>&nbsp;</button>")
+				var button = $("<button>&nbsp;</button>")
 				.attr("tabIndex", -1)
 				.attr("title", "Show All Items")
 				.insertAfter(input)
@@ -75,6 +80,13 @@
 					input.autocomplete("search", "");
 					input.focus();
 				});
+				
+				input.tooltip({
+					position: {
+						offset: (button.width() + 5) + " 0"
+					},
+					tooltipClass: "ui-state-highlight"
+				});
 			}
 		});
 
-- 
cgit v1.2.3