Es werden keine Ergebnisnachrichten auf der JQuery-Autocomplete angezeigt.

Ich verwende die jQuery autocomplete plugin, NICHT die UI-Autovervollständigung. Ich würde gerne eine unclickable Keine Ergebnisse Meldung erscheinen, wenn sie etwas eingeben, die keine Ergebnisse von der automatischen Vervollständigung hat. Wie kann ich das machen?Es werden keine Ergebnisnachrichten auf der JQuery-Autocomplete angezeigt.

Quelle

2010-08-11 babonk

Also, wenn es keine Ergebnisse gibt, möchten Sie, dass es ein "Ergebnis" anzeigt, das ein Element ist, das "Keine Ergebnisse" anzeigt - und es kann nicht klickbar sein? –

Ja, genau richtig – babonk

Hier ist eine Lösung, die ein paar kleine Änderungen an jquery.autocomplete.js erfordert.

In jquery.autocomplete.js:

Bearbeiten Sie die Funktion hideResultsNow() zu, dass es nennt emptyData() als erstes

function hideResultsNow() { 

    $('#emptyData').show(); 
    ... 
}

Ändern der keypress bind auf das Eingabefeld zu verstecken #emptyData nach jeder Tastendruck

$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) { 

    $('#emptyData').hide(); 
    ... 
}

ausblenden #emptyData nach einer erfolgreichen Auswahl (rechts, bevor es true zurück)

function selectCurrent() { 

    ... 
    $('#emptyData').hide(); 
    return true; 
}

Dann müssen Sie ein Div mit der gleichen Stilliste namens #emptyData zu Ihrem HTML unterhalb des Eingabefeldes hinzufügen. Hier ist der vollständige HTML-Code für die Testseite, die ich verwendet habe.

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 

    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="jquery.autocomplete.js"></script> 
    <script> 
    $(document).ready(function(){ 
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
    $("#example").autocomplete(data); 

    }); 
    </script> 

</head> 
<body> 
    API Reference: <input id="example" /> (try "C" or "E") 


    <div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'> 
    <ul style="max-height: 180px; overflow: auto;"> 
     <li id='noDataMsg' >No Results</li> 
    </ul> 
    </div> 

</body> 
</html>

Die Position #emptyData wurde aus der Position der automatischen Vervollständigung genommen und die CSS-Stil ist nicht ganz das gleiche wie für richtige Antworten, aber anders als das ich nicht glaube, sollte es etwas sein, die Änderungen benötigen . Hoffe, dass das dein Problem löst.

Quelle

2010-08-19 21:50:53

+1 Das ist eine ziemlich gute Lösung! –

Danke, es hat für mich funktioniert. Einige Änderungen, die ich für meinen Gebrauch gemacht habe: 1) Gezwungen, es nicht zu zeigen(), wenn nichts eingegeben wurde 2) mit mehreren Autokomplettierungen auf der Seite, müssen Sie einige Wenns hinzufügen, damit es mit den Rechten funktioniert. Danke für die gründliche Antwort! – babonk

@babonk: Wie hast du das gewollt, um nicht zu zeigen, wenn nichts eingegeben wurde, und vermutlich vor jedem Eintritt? – InnateDev

Hier ist 1/2 eine Lösung; Lassen Sie Ihren AJAX-Aufruf die Zeichenfolge "No Results" zurückgeben, wenn keine Ergebnisse vorliegen.

Um das einzelne Ergebnis nicht klickbar zu machen, muss man sich wahrscheinlich die Quelle des Plugins ansehen.

Quelle

2010-08-15 04:28:47 Hogan

Ich bin bereit, eine Lösung zu akzeptieren, die keine Ergebnisse von PHP oder von JS sendet, ist mir egal. – babonk

@babonk: haben Sie die keine Ergebnisse in Ihrem PHP implementiert? – Hogan

Momentan nicht, aber ich könnte das tun, wenn es eine Lösung gäbe – babonk

Ich denke, anstatt Autocomplete, um die Ajax zu tun, können Sie das selbst tun, dann übergeben Sie die Ergebnisse an die Autocomplete, mit einem einfachen Filter zwischen diesen beiden für keine Ergebnisse aus dem Server kommen.

var input = $('input.autocomplete'); 
var inputLimit = 10; 

// Create warning message and hide it 
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide(); 

input.keyup(function(){ 
    warning.hide(); 

    $.get('url.php', {q: this.value, limit: inputLimit}, function(data){ 
     if(data){ 
      input.autocomplete(data); 
     } else { 
      warning.show(); 
     } 
    } 
});

Natürlich ist die Warnung erscheint nicht im Bereich der automatischen Vervollständigung selbst, aber dies ist die beste Lösung, die ich von ohne Modifizieren der Plugin Quelle denken kann.

Quelle

2010-08-21 02:44:40

Es werden keine Ergebnisnachrichten auf der JQuery-Autocomplete angezeigt.

Antwort

Verwandte Themen