I have completely working Jquery autocomplete code apart from when the options are shown, they can't be selected. I have tried to find a similar instance so i don't duplicate questions but all other questions seem to relate to the mouse not working but keys are ect.
The problem i have is that i can hover over an option which is all correct, the hovered option css changes as it should (underlines) but when i click or press enter, the hover/focus css disappears, the list is still shown and there is no text in the input box. it's like nothing was ever pressed. I'm not sure if it's down to my jquery links (all other jquery on the site works perfectly). I'm really struggling with this one so any help would be really appreciated. Thank you.
<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>
I've tried a number of things to do with the select: function like:
select: function(event, ui) {
var origEvent = event;
while (origEvent.originalEvent !== undefined)
origEvent = origEvent.originalEvent;
if (origEvent.type == 'keydown')
$("#searchBox").click();
},
...
or
select: function(event, ui) {
$( "#searchBox" ).val(ui.item.value);
return false;
},
but none of them seem to make a difference.
I know the select function has a default state which I'm quite happy with the way that should work so i don't think it's to do with that but i could be wrong.
I eventually found a solution. The widget code i was using before the autocomplete (catcomplete) was working as far as selecting but would not let me select. The source code on this site was the code i should have been using and the below now works perfectly :)
<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>