Jquery Autocomplete Ergebnis kann nicht mit der Maus oder Tasten

Ich habe vollständig Jquery Autocomplete-Code abgesehen von, wenn die Optionen angezeigt werden, können sie nicht ausgewählt werden. Ich habe versucht, eine ähnliche Instanz zu finden, damit ich keine Fragen dupliziere, aber alle anderen Fragen scheinen sich auf die Maus zu beziehen, die nicht funktioniert, aber Schlüssel sind ect.Jquery Autocomplete Ergebnis kann nicht mit der Maus oder Tasten

Das Problem, das ich habe, ist, dass ich über eine Option schweben kann, die alle korrekt ist, ändert die Option hovered CSS wie es sollte (Unterstreichungen) aber wenn ich klicke oder drücke Enter, verschwindet der Hover/Fokus CSS, die Liste ist immer noch angezeigt und es ist kein Text in das Eingabefeld. es ist als ob nichts jemals gedrückt wurde. Ich bin mir nicht sicher, ob es an meinen jQuery-Links liegt (alle anderen Jquery auf der Seite funktionieren perfekt). Ich kämpfe wirklich mit diesem, also würde jede Hilfe wirklich geschätzt werden. Vielen Dank.

<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>

Ich habe eine Reihe von Dingen versucht, mit der select: Funktion zu tun:

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

oder

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

aber keiner von ihnen scheint einen Unterschied zu machen.

Ich weiß, dass die Auswahlfunktion einen Standardzustand hat, mit dem ich ziemlich glücklich bin, wie das funktionieren sollte, also glaube ich nicht, dass es damit zu tun hat, aber ich könnte falsch liegen.

Quelle

2017-05-24 crapAtCode

Ich fand schließlich eine Lösung. Der Widgetcode, den ich vor der automatischen Vervollständigung (catcomplete) verwendete, funktionierte bis zur Auswahl, ließ mich aber nicht auswählen. Der Quellcode auf this site war der Code, den ich hätte verwenden sollen und der unten funktioniert jetzt perfekt :)

<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>

Quelle

2017-05-24 10:56:05 crapAtCode

Jquery Autocomplete Ergebnis kann nicht mit der Maus oder Tasten

Antwort

Verwandte Themen