✔ JQuery-UI Autocomplete und Spinner nutzen

[swas]

Hallo Leute,

ich bin etwas neu im JavaScript Bereich und möchte gerade Folgendes erreichen:
Ich habe ein Autocomplete Widget, mit dem ich eine Auswahl treffe. Mit der select Funktion des Autocomplete rufe ich eine weitere Funktion auf die dann etwas erledigt mit den Werten des Autocomplete.

Jetzt wollte ich einen Spinner dazu nehmen um quasi einen weiteren Filter zu haben. Ich dachte mir, wenn der Wert des Spinners sich ändert, kann ich die select Funktion des Autocomplete triggern und dann ganz normal weiter machen.

Leider bekomme ich das nicht hin und weiß auch nicht ob das der richtige Weg ist. Hier habt ihr noch ein kleines Beispiel wie ich das gerne machen würde.

Der HTML-Code:

<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags" />
    <input id="spinner" type="text" value="2" />
    <div id='tagsname'></div>
</div>

Der JS-Code:

$(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Java",
        "JavaScript"];
    $("#tags").autocomplete({
        source: availableTags
    });
});

$("#spinner").spinner({
    max: 53,
    min: 1
});

$('.ui-spinner-button').click(function () {
    $(this).siblings('input').change();
});

$(document).ready(function () {

    $('#spinner').on('change', function () {
        alert("test");
        $('#tags').trigger('autocompleteselect');
    });

    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value + ' ' + $('#spinner').spinner('value'));
    });
});

Wenn man bei dem Beispiel im Spinner etwas ausgewählt hat und dann über das Autocomplete eine Auswahl trifft funktioniert es. Leider geht das nicht, wenn man im Spinner etwas ändert.

Würde mich freuen, falls mir wer weiter helfen könnte oder mir zumindest an den Kopf haut wenn das totaler Schwachsinn ist.

 

[Quaese]

Hi,

keine Ahnung, ob ich dein Anliegen richtig verstanden habe. Sollte es darum gehen, das autocompleteselect-Ereignis vom Spinner auszulösen, könntest du folgendes versuchen.

$(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Java",
        "JavaScript"];
  
    $("#tags").autocomplete({
        select: function(e, ui){
            console.log('autocompleteselect: ', arguments);
        },
        source: availableTags
    });
  
    $("#spinner").spinner({
        stop: function(e, ui){
            // autocompleteselect-Ereignis auslösen
            $('#tags').data('ui-autocomplete')._trigger('select', 'autocompleteselect', {label: this.id, value: this.value});
        },
        max: 53,
        min: 1
    });
});

Das übergebene Objekt beim Auslösen des Ereignisses musst du so anpassen, dass es deinen Anforderungen genügt.

Ciao
Quaese

 

[swas]

Hey danke dir ich konnte jetzt erst Antworten, da es ein wenig stressig war.
Das hat leider bei mir nicht funktioniert. Ich habe es dann einfach anders gelöst in dem ich die Werte in der Funktion in quasi übergeordnete Variablen schreibe und diese dann an einer anderen Stelle wieder auslese.
Gefällt mir zwar nicht ganz so gut aber es funktioniert