StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>My previous suggestion didn't actually work because, as you mentioned, there is a somewhat unexpected <code>blur</code> event triggering the <code>change</code> <em>before</em> event the <code>click</code> on the menu. I had assumed that it was related to the <code>this.hide()</code> call inside the <code>Typeahead.prototype.select</code> method.</p> <p>However, after a bit of trial-and-error, I do think that I may have found a <a href="http://jsfiddle.net/KTKFh/" rel="nofollow">workaround</a>. It's not actually the <code>this.hide()</code> call within the <code>select</code> method that is causing the problem. Knowing that there are two ways that the user can trigger selection helps to understand the hopefully working workaround (I only tested in Chrome): using the keyboard, such as hitting enter, or clicking on the item. As a result, knowing that the click is the problem-child of the two, I noticed that the <code>mousedover</code> event is maintained when the user mouses over the dropdown.</p> <p>As a result, the odd behavior can be manually <em>ignored</em> within a <code>change</code> event. To simplify the process of determining what actually causes the <em>next</em> <code>change</code> event I used a different (custom) event called "<code>selected</code>" to denote the user has changed the value rather than a standard <code>change</code>. Unfortunately, you still must manually ignore <code>change</code> events when the <code>mousedover</code> property is <code>true</code>:</p> <p>Simplified HTML (I used the <code>p</code> tag because I find that Chrome has trouble with debugging JSFiddle's JavaScript, and combining with the console lead to a bad time):</p> <pre><code><input class="typeahead " type="text" placeholder="contact" value="Peter skillet"></input> <input type="text"></input> <p id="text" /> </code></pre> <p>JavaScript (text can be replaced by <code>console.log</code> for the those interested comfortable):</p> <pre><code>var contacts = ['pete', 'geoffrey']; var $text = $("#text"); var typeahead = $('.typeahead').typeahead({source: contacts}).data('typeahead'); typeahead.select = function () { var val = this.$menu.find('.active').attr('data-value'); this.$element.val(this.updater(val)) .trigger('selected'); // <- unique event return this.hide() }; $('input.typeahead').on('change', function (e) { var $target = $(e.target); if (typeahead.mousedover) { $text.html($text.html() + "mousedover [ignored selection]<br />"); } else if ($.inArray($target.val(), contacts) < 0) { $text.html($text.html() + "show add<br/>"); } }).on('selected', function () { $text.html($text.html() + "selected<br />"); }); </code></pre> <p>For reference, this is the default <code>select</code> method:</p> <pre><code>select: function () { var val = this.$menu.find('.active').attr('data-value') this.$element .val(this.updater(val)) .change() return this.hide() } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload