Befüllen von Suchergebnissen

Ich verwende JQuery sehr oft, um nach Änderungen in Sucheinstellungen das Suchergebnis zu aktulisieren.

Den Aufruf mache ich meist nach folgenden Events:

• Eingabe in einem Textfeld:

• Änderung des Werts in einem Auswahlfeld:

              
                
                Value1
                Value2
              
            

Bevor wir zum Javascript Teil kommen, braucht man noch folgende Dinge:

• Einen Container im HTML, in dem das Suchergebnis angezeigt wird. Ich verwende dafür meist ein div.

• Eine Webseite, die das HTML für das Suchergebnis ausgibt, abhängig von den Parametern. Da ich meist mit ASP-Seiten arbeite nenne ich diese Seite in meinem Beispiel SearchResult.aspx?MyParameter1=Value&MyParameter2=Value2

Folgende Dinge müssen im Javascript Teil gemacht werden:

• Einbinden der JQuery-Javascript-Datei, die sich bei mir meist in einem js Ordner befindet:

• Die Javascript Funktion updateSearchResult():

              function updateSearchResult() {
                //1. get parameter values
                var strMyParameter1Value = document.getElementById("MyParameter1").value;
                var strMyParameter2Value = document.getElementById("MyParameter2").value;
  
                //2. create the search result link
                var strLink = "SearchResult.aspx?";
                strLink += "MyParameter1=" + encodeURIComponent(strMyParameter1Value);
                strLink += "&MyParameter2=" + encodeURIComponent(strMyParameter2Value);
  
                //3. add a constantly changing parameter for IE
                var now = new Date();
                var strNow = now.getHours() + "" + now.getMinutes() + ""
                  + now.getSeconds() + "" + now.getMilliseconds();
                strLink += "&UselessDateForIE=" + strNow;
  
                //4. query and show the search result
                $.get(strLink, function(data) {
                  $("#SearchResult").html(data);
                });
              }
            

Bemerkungen zur Javascript Funktion updateSearchResult():

• encodeURIComponent wird verwendet, um die Parameter-Werte über die URL weitergeben zu können und um Problemen mit Sonderzeichen vorzubäugen. Mit encodeURIComponent werden übrigens auch die Zeichen & und ? encodiert, während encodeURI diese Zeichen nicht berücksichtigt und daher nur geeignet ist, die gesamte URL mit den Parameter-Trennern zu encodieren. Wenn diese Parameter-Trenner dann auch in den Parameter-Werten auftreten, kommt es zu Problemen.
• Der URL Parameter UselessDateForIE wird wirklich nur für den Internet Explorer benötigt, damit auch bei wiederholten Abfragen mit den selben Suchparametern die Seite SearchResult.aspx neu abgerufen wird. Verwendet man diesen Parameter erneuert das Suchergebnis nur, wenn andere Parameter übergeben werden und so bietet es sich an, die aktuelle Zeit immer als Parameter mit zu übergeben.
  
  Eine Aktualisierung des Suchergebnisses bietet sich immer an, auch wenn sich die Sucheingaben nicht ändern, weil in der Zwischenzeit Datenmanipulationen vorgenommen worden sein könnten.
• Mit der JQuery get Methode wird die Suchergebnisseite aufgerufen. Die HTML-Ausgabe dieser Seite wird danach dem Div-Container mit der id SearchResult zugewiesen.

Aufruf mit Return

Bevor ich mit JQuery gearbeitet habe, habe ich Suchergebnisse auf der aktuellen Seite mit Hilfe von ASP angezeigt. Damit die Suchparameter übernommen wurden, habe ich dafür einen Suchen-Button verwendet, der die aktuelle Seite mit den neuen Parametern aufgerufen hat. Damit diese Suche auch mit dem Drücken der Return-Taste funktionierte habe ich folgenden Javascript-Code im HTML-Header verwendet:

        /** on enter the user should submit the user id **/
        function keyEvent (e) {
            e = e || window.event;
            var keynum = e.keyCode || e.which;
            if(keynum == 13){
                updateSearchResult();
                return false;
            }
        }
        document.onkeypress = keyEvent;
      

So kann man es aber immer noch nutzen, um das Suchergebnis mittels JQuery zu aktualisieren, in dem man die Return-Taste drückt.