JQuery autocomplete basiert auf wählen Sie die option Wert

Ich bin sehr sehr neu in JQuery und Javascript. Ich habe umgesetzt AutoVervollständigen-Funktion, die ruft die Daten aus remote-Datenquelle( Mysql + PHP) unter Verwendung von jQuery Demo.
Ich komme nicht weiter bei dem Teil, wo der mysql-Abfrage ausgelöst durch das php-Skript ist gebunden, um die drop-down-Menü-option.

Also, wenn ich wählen Sie "Kommentare" aus einem der Wert der option, wie kann ich binden Sie es auf die Suche textbox mit der id="search_term".

<label>Select Search parameter:
    <select id="search_parameter" name="search_parameter">
        <option value="Sample name">Sample Name</option>
        <option value="Location name">Location Name</option>
        <option value="comments">Comments</option>
    </select>
</label>

<label> Search Term:<input type="text" id="search_term" required name="search_term" maxlength=30></label>

Nun, wenn ich wählen Sie die option Wert als "Kommentare" löst das PHP-script Abfragen in das Feld Kommentar ein. Aber ich bin nicht sicher, wie bekomme ich die bedingte Anweisung in JQuery. Ich bin nicht immer Erfolg mit

$(function(){
    $('#search_parameter').change(function(){
        if (this.value == "comments") {
            jQuery(document).ready(function($){
                $('#search_term').autocomplete({source:'search_comments.php', minLength:2});
            });
        else if( this.value =="Sample name") {
            jQuery(document).ready(function($){
                $('#search_term').autocomplete({source:'search_sample_name.php', minLength:2});
            });
}

Ich bin nicht sicher, ob dies die richtige Vorgehensweise ist. Ich entschuldige mich wenn diese Frage nicht würdig stackoverflow.com.
Danke

InformationsquelleAutor deepseas | 2013-01-19

  1. 3

    Ich würde empfehlen, die Initialisierung der autocomplete-widget einmal auf die input. Sie können die option Methode, um den source wenn der Wert der select element geändert wird:

    $(function () {
    $("#search_term").autocomplete({
        source: "",
        minLength: 2
    });

    $("#search_parameter").change(function () {
        if (this.value === "Sample name") {
            $("#search_term").autocomplete("option", "source", "search_sample_name.php");
        } else if (this.value === "comments") {
            $("#search_term").autocomplete("option", "source", "search_comments.php");
        }
    }).change(); //Trigger the "change" event to set the source correctly the first time.
});

    Können Sie diese noch robuster, indem eine data-* - Attribut für jede option aus, die angibt, welche Quelle zu verwenden:

    HTML:

    <label>Select Search parameter:
    <select id="search_parameter" name="search_parameter">
        <option value="Sample name" data-autocomplete="search_sample_name.php">Sample Name</option>
        <option value="Location name" data-autocomplete="search_locations.php">Location Name</option>
        <option value="comments" data-autocomplete="search_comments.php">Comments</option>
    </select>
</label>

    JavaScript:

    $(function () {
    $("#search_term").autocomplete({
        source: ''
    });

    $("#search_parameter").change(function () {
        var selectedSource = $(this).find("option:selected").data("autocomplete");

        $("#search_term").autocomplete("option", "source", selectedSource);
    }).change();
});
    Data-Attribut scheint knapper als bedingten Ansatz. Auf der Seite Hinweis: ich denke, dass Javascript tendenziell weniger Vertrauen in bedingten Anweisungen und mehr auf die tags und die ID/Attribut. Ist es eine Substanz, die auf diese Frage?
    Ich denke, es hängt alles davon ab, was du tust. Aber ich Stimme mit Ihnen überein, ich würde das data-* Ansatz in diesem Fall.

    InformationsquelleAutor Andrew Whitaker

Schreibe einen Kommentar