Is it posible to have jQuery UI autocomplete on a contenteditable div and datepicker working in harmony?

Question

In the forum post "How to make jquery autocomplete to work for a contenteditable DIV instead of just INPUT, TEXTAREA fields." we see how to get autocomplete working on a contenteditable div element, however combined with datepicker the datepicker simply does not populate the input field.

As you can see in this jsFiddle demo: http://jsfiddle.net/xvnaA/

Anyone have any wise ideas on how to fix this?

Witmer

Answer 1

Instead of just overriding $.fn.val you could redefine it like this:

(function ($) {
   var original = $.fn.val;
   $.fn.val = function() {
      if ($(this).is('[contenteditable]')) {
         return $.fn.text.apply(this, arguments);
      };
      return original.apply(this, arguments);
   };
})(jQuery);

See http://jsfiddle.net/xvnaA/27/

Neighbors

This is some awesomeness right here. It appears to work. I will do some more testing... – Witmer

I've discovered a side affect. Upon clicking on the datepicker input field it is emptied as opposed to this demo: jsfiddle.net/gheqD Any ideas? – Witmer

I had a look at this in a bit more detail, unfortunately it's not going to work because it means $(this).val() will return an object rather than a string... – Witmer

Good stuff! I edited the answer to work on elements with any value of contenteditable (e.g. plaintext-only) and to use .text instead of .html (mimic behavior of .val better, reduce possibility of XSS). Some people may want to switch back to .html, if they know what they're doing. – Genome