1

I'm trying to make myself a little jQuery plugin based on jQueryUI's Autocomplete, because I have a lot of different autocomplete fields which I want to treat differently.

Although every other part of my plugin is working fine, it does one thing that I don't understand. Despite that the onSelect function clearly defines this:

box.val(ui.item.nazev); // item name
boxID.val(ui.item.value);

which I can confirm by listing those elements values after it's been done, for the user the box element somehow shows ui.item.value

I tried every possibility I can think of, none of them worked ... I'm quite desperate.

Plugin is included here: http://jsfiddle.net/meridius/AVA6M/

Edit:

OK, it's quick and dirty, but I managed to make it work in jsfiddle.net without AJAX. It's not perfect (results aren't filtered as typing), but you can see what I mean when you select some result.

meridius
  • 1,495
  • 1
  • 18
  • 26
  • Have you debugged your script? Some F12 could give you the answer. – daniloquio Mar 21 '13 at 13:23
  • What do you mean by F12? I used Web console and Firebug and none of them showed me any errors. – meridius Mar 21 '13 at 13:34
  • For F12 I mean that, Firebug in case of Firefox. You should use firebug to debug your script and analize the exact moment when box element's value changes. Here you gave us an awful lot of information and help you solve the problem would require a lot of work since the fiddle doesn't work. Is not very likely you getting some answers unless you edit your post narrowing the problem in terms of code. – daniloquio Mar 21 '13 at 13:49
  • 1
    So I updated plugin on jsfiddle (as you can see above). I also tried to to debug it in Firebug, but it looks like I already wrote above - the onSelect part truly sets the right text to box and boxID elements, but I lost my track after it completes and that's where it gets mixed up. I don't know where to put breakpoint next. – meridius Mar 21 '13 at 15:09
  • Working fiddle allowed me to find a solution to your problem. I posted an answer, please check it out. – daniloquio Mar 21 '13 at 16:10

1 Answers1

1

enter image description here

Using Chrome (F12) to debug your fiddle I found your problem at line Line 2257 o jquery-1.9.1.js. It was a matter of event propagation so the following code should solve your problem.

select: function (event, ui) {
            o.onSelect(event, ui, box, boxID);
            return false; //This line stops event propagation solving the problem.
},

Note: see this post for details on how to stop event propagation. event.preventDefault() vs. return false

Community
  • 1
  • 1
daniloquio
  • 3,822
  • 2
  • 36
  • 56
  • Thank you, that solved my problem. Also thanks for the link. BTW, I already had return false in original code (last line of onSelect now), I just moved it during "pluginifacion". Strange, that it doesn't affect the select: event while its returning false too. – meridius Mar 21 '13 at 17:46
  • Glad I was of help :) The way to find the problem was to put a breakpoint in the onSelect function and from there, keep pressing F11 (go to next step while debugging). – daniloquio Mar 22 '13 at 15:05