From 8f18c726b640c2555ca3aa35bf061240785d085b Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Thu, 18 Feb 2010 23:15:37 +0530
Subject: [PATCH] autocomplete, continued

---
 build/css/ox.ui.classic.css | 4 ++++
 build/css/ox.ui.css         | 1 +
 build/css/ox.ui.modern.css  | 4 ++++
 build/js/ox.js              | 8 ++++++++
 build/js/ox.ui.js           | 2 +-
 demos/test/index.html       | 5 +++--
 6 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css
index 5aaf4c35..d3209358 100644
--- a/build/css/ox.ui.classic.css
+++ b/build/css/ox.ui.classic.css
@@ -4,6 +4,10 @@ body.OxThemeClassic {
 .OxThemeClassic div {
     color: rgb(16, 16, 16);
 }
+.OxThemeClassic .OxHighlight {
+    background: rgb(255, 255, 0);
+}
+
 
 /*
 ================================================================================
diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 2cbb5bdf..d25a7944 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -20,6 +20,7 @@ div, input {
 td {
     padding: 0px;
 }
+
 /*
 ================================================================================
 Core
diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index 09854aa3..3131830f 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -4,6 +4,10 @@ body.OxThemeModern {
 .OxThemeModern div {
     color: rgb(240, 240, 240);
 }
+.OxThemeModern .OxHighlight {
+    background: rgb(255, 255, 0);
+    color: rgb(0, 0, 0);
+}
 
 /*
 ================================================================================
diff --git a/build/js/ox.js b/build/js/ox.js
index a361cb04..ed0bf3da 100644
--- a/build/js/ox.js
+++ b/build/js/ox.js
@@ -1360,6 +1360,14 @@ Ox.startsWith = function(str, sub) {
     return str.substr(0, sub.length) === sub;
 };
 
+Ox.stripTags = function(str) {
+    /*
+    >>> Ox.stripTags("f<span>o</span>o")
+    foo
+    */
+    return str.replace(/(<.*?>)/gi, "");
+};
+
 Ox.toCamelCase = function(str) {
     /*
     >>> Ox.toCamelCase("foo-bar-baz")
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 88a429c5..8d697e76 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -1629,7 +1629,7 @@ requires
         }
         function onClick(event, data) {
             Ox.print("onClick", data)
-            that.focus().val(data.title);
+            that.focus().val(Ox.stripTags(data.title));
             self.menu.hideMenu();
         }
         function selection() {
diff --git a/demos/test/index.html b/demos/test/index.html
index 19db1a10..241d5c3f 100644
--- a/demos/test/index.html
+++ b/demos/test/index.html
@@ -330,7 +330,8 @@
                     id: "state",
                     autocomplete: function(value, callback) {
                         value = value.toLowerCase();
-                        var items = [];
+                        var items = [],
+                            regexp = new RegExp("(" + value + ")", "ig"),
                             states = [
                                 "Alabama", "Alaska", "Arizona", "Arkansas", "California",
                                 "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
@@ -349,7 +350,7 @@
                         } else {
                             $.each(states, function(i, state) {
                                 if (state.toLowerCase().indexOf(value) > -1) {
-                                    items.push(state);
+                                    items.push(state.replace(regexp, "<span class=\"OxHighlight\">$1</span>"));
                                 }
                             });
                         }