2016-07-11 32 views
0

Das Problem ist: Ich habe ein div, das alle meine Benutzerliste umschließt. Ich möchte ein Suchfeld erstellen, aber ich möchte nicht Ajax verwenden, also habe ich versucht, JQuery zu versuchen, um den Text innerhalb des div zu suchen und die anderen Ergebnisse auszublenden. Ich habe versucht, aber ich bin auf diesem stucked:Suche nach Text innerhalb div

Jemand kann, wie ich das tun kann? Danke!

In meinem HTML ich habe dies:

<div class="chat-users" style="height: 400px;"> 
      <?php include_once('user-chat-list.php'); ?> 
     </div> 

Inside "Chat-Benutzer" Ich habe eine Liste mit allen Benutzern, mit php geladen

Hier ist mehr HTML um die Struktur zu zeigen: https://jsfiddle.net/jdqbnz2w/

+0

Und was ist Ihr html? – Mohammad

+0

@Mohammad In diesem habe ich viele andere divs, geladen von PHP

\t \t \t \t \t \t \t

+0

Fügen Sie mehrere Beispielinhalte in HTML zum Lösen von Problem – Mohammad

Antwort

1

Nach Anfrage bearbeiten

Hier ein aktualisierter ist JSFiddl e basierend auf dem JSFiddle Sie enthalten die zeigen, wie die Suche mit Ihren speziellen Anwendungsfall zu implementieren:

JSFiddle


Ursprüngliche Antwort:

Sie einige relevante Informationen fehlen in Ihrem Frage, wie zum Beispiel "wie sieht das HTML aus, dass kommt aus?" Aus diesem Grund ist es schwierig zu verstehen, wie Ihr Code genau funktioniert.

Nichtsdestoweniger, hier ist ein einfaches Beispiel auf, was Sie zur Verfügung gestellt haben, dass Sie ändern können, das tut, was Sie suchen. Sie können den folgenden Codeausschnitt führen ein funktionierendes Beispiel zu sehen:

var $searchBox = $('#search-weeazer'); 
 
var $userDivs = $('.chat-users div'); 
 

 
$searchBox.on('input', function() { 
 
    var scope = this; 
 
    if (!scope.value || scope.value == '') { 
 
    $userDivs.show(); 
 
    return; 
 
    } 
 

 
    $userDivs.each(function(i, div) { 
 
    var $div = $(div); 
 
    $div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1); 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Search: 
 
<input id="search-weeazer"> 
 

 
<p>Users:</p> 
 
<div class="chat-users"> 
 
    <div>Tony</div> 
 
    <div>Amber</div> 
 
    <div>Ronald</div> 
 
</div>

+0

Danke !!! Dein Code funktioniert! Aber, noch eine kleine Frage, warum dieser Code einige versteckte Eingaben zeigt? Wie jetzt:

+1

Jetzt, da ich die relevanten Informationen darüber, wie der HTML-Code strukturiert ist, aus dem von Ihnen bereitgestellten JSFiddle sehen kann, kann er für diesen Anwendungsfall modifiziert werden. – KevBot

+0

Danke, krank warten –