無法使用鼠標或鍵選擇Jquery自動完成結果

除了顯示選項時，我已經完全使用Jquery自動完成代碼，它們不能被選中。我試圖找到一個類似的實例，所以我不重複的問題，但所有其他問題似乎與鼠標不工作，但鍵是電子等。無法使用鼠標或鍵選擇Jquery自動完成結果

我遇到的問題是我可以將鼠標懸停在一個正確的選項上，懸停的選項css會改變，因爲它應該（下劃線），但是當我點擊或按下回車鍵時，懸停/焦點css消失，列表是仍然顯示，並且輸入框中沒有文字。這就像沒有任何事情是按下的。我不確定它是否屬於我的jQuery鏈接（網站上的所有其他jQuery都完美無缺）。我真的很苦惱這個，所以任何幫助將非常感激。謝謝。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

    </head> 

<body> 
<?php 

// query to find usernames for the search bar 
    $userSearch = $pdo->prepare("SELECT username FROM members"); 


    $userSearch->execute([]); 


    $userSearchResult = []; 
while ($row = $userSearch->fetch(PDO::FETCH_ASSOC)) { 
    $userSearchResult[] = [ 
     'value' => $row['username'], 
     'category' => "username" 
    ]; 
} 

// query to find teams for the search bar 
    $teamSearch = $pdo->prepare("SELECT teamName FROM teams"); 


    $teamSearch->execute([]); 


     $teamSearchResult = []; 
while ($row = $teamSearch->fetch(PDO::FETCH_ASSOC)) { 
    $teamSearchResult[] = [ 
     'value' => $row['teamName'], 
     'category' => "teams" 
    ]; 
} 

    $result = array_merge(
    $userSearchResult, 
    $teamSearchResult 
); 

?> 

<script type="text/javascript"> 
    //Assign php generated json to JavaScript variable 
    var searches = <?php echo json_encode($result)?> 

    $.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var self = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      if (item.category != currentCategory) { 
       ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
       currentCategory = item.category; 
      } 
      self._renderItem(ul, item); 
     }); 
    } 
}); 

$(function() { 
    $("#searchBox").catcomplete({ 
     source: searches 
    }); 
    }); 

</script>

我已經嘗試了一些事情，如select:函數來完成：

select: function(event, ui) { 
     var origEvent = event; 
     while (origEvent.originalEvent !== undefined) 
      origEvent = origEvent.originalEvent; 
     if (origEvent.type == 'keydown') 
      $("#searchBox").click(); 
    }, 
    ...

或

select: function(event, ui) { 
    $("#searchBox").val(ui.item.value); 
    return false; 
    },

，但他們都不有所作爲。

我知道選擇功能有一個默認狀態，我很滿意應該工作的方式，所以我不認爲這是做的，但我可能是錯的。

來源

2017-05-24 crapAtCode

我終於找到了解決方案。我在使用自動完成（catcomplete）之前使用的小部件代碼儘可能選擇，但不會讓我選擇。 this site上的源代碼是我應該使用的代碼，現在下面的代碼完美:)

<script type="text/javascript"> 
    //Assign php generated json to JavaScript variable 
    var searches = <?php echo json_encode($result)?> 

    $(function() { 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
     _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
     }, 
     _renderMenu: function(ul, items) { 
     var that = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      var li; 
      if (item.category != currentCategory) { 
      ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
      currentCategory = item.category; 
      } 
      li = that._renderItemData(ul, item); 
      if (item.category) { 
      li.attr("aria-label", item.category + " : " + item.label); 
      } 
     }); 
     } 
    }); 

$(function() { 
    $("#searchBox").catcomplete({ 
     source: searches, 
    }); 
    }); 
    }); 

</script>

來源

2017-05-24 10:56:05 crapAtCode

無法使用鼠標或鍵選擇Jquery自動完成結果

回答

相關問題