Javascript Such-Skript
Hallo,
ich bin gerade dabei, ein Such-Skript mit JS (+jQuery) zu machen, und habe da ein kleines Problem. Das soll so ablaufen, dass während man was eintippt in Echtzeit der Inhalt, der nicht die Eingabe enthält, ausgeblendet wird.
Kurz der Code der Funktion:
function searchfunction() {
var search = $("#searchbox").val().toLowerCase();
if(search != "")
{
$("#login ul li h2:not(:contains('"+search+"'))").parent().hide();
$("#login ul li h2:contains('"+search+"')").parent().show();
}
else
$("#login ul li").show();
}
Nun hab ich aber ein Problem mit der Groß und Kleinschreibung, und zwar wenn der Inhalt lautet "Max Mustermann" und man gibt in die Suche "max mustermann" ein, wird der Inhalt auch ausgeblendet..
Gibt es eine Möglichkeit, dass das Skript die Groß und Kleinschreibung ignoriert oder so?
3 Antworten
Versuch mal das hier.
<input type="text" id="search" />
<div class="ergebnis" id="ergebnis1">Max Mustermann</div>
<div class="ergebnis" id="ergebnis2">Manfred Mustermann</div>
<div class="ergebnis" id="ergebnis3">Erika Mustermann</div>
<script>
$('#search').on('keyup', function(){ removeBoxes(this.value) } );
function removeBoxes(value){
var ergebnisse = $('.ergebnis');
$.each(ergebnisse, function( key, value ) {
var inhalt = value.innerHTML;
var suche = new RegExp(value,'i');
if(!inhalt.match(suche)){
$(value).hide();
}else{
$(value).show();
}
});
}
</script>
Hier gibts die DEMO: http://fiddle.jshell.net/Pisi2012/5HjeF/
Dieses Problem hätte ich anderst Gelöst.
Code für PHP-File (für suche):
<?php
if(isset($_GET['q'])){
//Schritte für die zusammensetzung bei ' ' oder ',' werden hier ausgelassen
$q = $_GET['q'];
$l_q = strlen($q);
if($l_q >= 4){ //Minimalgröße das Suchanfrage gestartet wird liegt bei 4
//Hier Schritte zur durchsuchung einer MySql - Datenbank oder Verzeichnissen
foreach($werte as $wert){
echo $wert . "<br />";
}
}else{
echo "Wird geladen...";
}
}else{
echo "Loading...";
}
?>
Folgender Code für HTML-File:
<html>
<head>
<deine eingebundenen tags></deine eingebundenen tags>
<script src="></script>
<script src="link.zur/nachfolgenden/js.datei"></script>
<script>
$(document).ready(function(){
get_q();
});
</script>
</head>
<body>
<navigation></navigation>
<bla bla></bla bla>
<input type="text" size=60 name="search_value" id="search_vlaue" />
<div id="search_box"></div>
</body>
</html>
Folgender Code in einer Externen JS - Lib:
function get_q(){
var search_value = $('#search_value');
var value = serach_value.value;
search(value);
}
function search(q){
setTimeout(function(){
$('#search_box').load('//server.domain/verzeichnis/datei.php?q='+q).fadeIn();
get_q();
},1);
}
#Die aktualisierungsverzögerung liegt hier bei min. 1ms natürlich kann dies bei langsamer Internetgeschwindigkeit länger als 1ms dauern.
Mann könnte hier natürlich noch effekte wie slideToggle('slow') für die Suchbox hinzufügen o.ä.
Ja natürlich kann man dieses Script noch verbessern und schöner gestallten aber der grundaufbau ist durch meine Antwort gegeben
Das wird von
.toLowerCase()
verursacht. Also weg lassen.
das problem wird aber weiterhin bestehen. Mir geht es darum dass die Groß/Kleinschreibung komplett ignoriert wird. Das .toLowerCase() hab ich eig so gemeint dass ich das bei $("#login ul li ...") auch so hinkriege dass es klein wird, und damit das problem beseitige.
Da ist ein Fehler drin. Das korrekte Skript findest du hier: http://fiddle.jshell.net/Pisi2012/5HjeF/1/