jquery-ui自动完成防止tab键焦点答案

【问题标题】：jquery-ui autocomplete prevent tab key focusjquery-ui自动完成防止tab键焦点
【发布时间】：2016-11-04 19:29:21
【问题描述】：

发帖回答我自己的问题：

我有以下 HTML：

    <select id="genre-select">
        <option value="-1">Make a selection</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <input id="band-input" type="text" />
    <button id="go-button">Go</button>
    <button>Unrelated Button</button>

我正在使用 jquery-ui 自动完成对象，我原来的 javascript 看起来像：

            var bandValue = "-1";
            var $genreSelect = $("#genre-select");
            var $bandInput = $("#band-input");
            var $goButton = $("#go-button");
            var bands = [
              {
                value: "1",
                label: "AC/DC",
                desc: "..."
              },
              {
                value: "2",
                label: "Black Sabbath",
                desc: "Ozzy Osbourne, Tony Iommi, Bill Ward, etc."
              },
              {
                value: "3",
                label: "Cars, The",
                desc: "..."
              }
            ];
            $bandInput.autocomplete({
              source: bands,
              focus: function( event, ui ) {
                $bandInput.val( ui.item.label );
                return false;
              },                  
              select: function( event, ui ) {
                console.log("select event");
                bandValue = ui.item.value;
                $bandInput.val(ui.item.label);          
                return false;
              }           
            });

它有效，但是当使用键盘导航并按 TAB 时，焦点会跳转到“不相关按钮”而不是预期的“开始”按钮。我试图吞下所有按键和单击事件并完全控制 $goButton 何时获得焦点，但没有任何效果。

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete keypress

【解决方案1】：

经过大量故障排除后，解决方案实际上非常简单。如果 autocomplete.select 事件来自 TAB，我只需跳过对 $goButton.focus()，并允许常规事件完成它的工作。

            $bandInput.autocomplete({
              source: bands,
              focus: function( event, ui ) {
                $bandInput.val( ui.item.label );
                return false;
              },                  
              select: function( event, ui ) {
                bandValue = ui.item.value;
                $bandInput.val(ui.item.label);
                if(event.which != null){
                    if(event.which != 9){
                        //it's not a tab, so focus
                        $goButton.focus();
                    }
                    else {
                        //already going to focus, so don't create race condition
                    }
                }               
                return false;
              }           
            });

【讨论】：