jQuery Combobox / select saisie semi-automatique?
Existe-t-il un plug-in jQuery pour remplacer la boîte de sélection/combo?
J'ai essayé SexyCombo, et c'est aussi proche de ce que je veux, mais il ne se termine pas si vous écrivez du milieu, seulement du début.
J'ai 2 niveaux de catégories (20 catégories de premier niveau et avec des sous-catégories au total 120 catégories), donc lorsque l'utilisateur soumet une entrée, il doit trouver la catégorie souhaitée dès que possible.
Donc ... 2 niveaux + saisie semi-automatique remplissent le texte même si vous écrivez des lettres du milieu.
Ou toute autre solution?
Jetez un œil à l'exemple suivant de la saisie semi-automatique jQueryUI, car il garde une sélection et je pense que c'est ce que vous recherchez. J'espère que cela t'aides.
[modifier] Le charmant plugin jQuery choisi a été acheté à mon attention, ressemble à une excellente alternative pour moi.
Ou si vous souhaitez simplement utiliser la saisie semi-automatique jQuery, j'ai étendu le exemple de la zone de liste déroulante pour prendre en charge les valeurs par défaut et supprimer les info-bulles pour donner ce que je pense être un comportement plus attendu. Essayez-le .
(function ($) {
$.widget("ui.combobox", {
_create: function () {
var input,
that = this,
wasOpen = false,
select = this.element.hide(),
selected = select.children(":selected"),
defaultValue = selected.text() || "",
wrapper = this.wrapper = $("<span>")
.addClass("ui-combobox")
.insertAfter(select);
function removeIfInvalid(element) {
var value = $(element).val(),
matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
valid = false;
select.children("option").each(function () {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything
$(element).val(defaultValue);
select.val(defaultValue);
input.data("ui-autocomplete").term = "";
}
}
input = $("<input>")
.appendTo(wrapper)
.val(defaultValue)
.attr("title", "")
.addClass("ui-state-default ui-combobox-input")
.width(select.width())
.autocomplete({
delay: 0,
minLength: 0,
autoFocus: true,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
},
select: function (event, ui) {
ui.item.option.selected = true;
that._trigger("selected", event, {
item: ui.item.option
});
},
change: function (event, ui) {
if (!ui.item) {
removeIfInvalid(this);
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-left");
input.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
$("<a>")
.attr("tabIndex", -1)
.appendTo(wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.mousedown(function () {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
input.focus();
// close if already visible
if (wasOpen) {
return;
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
Je sais que cela a été dit plus tôt, mais jQuery Autocomplete fera exactement ce dont vous avez besoin. Vous devriez consulter les documents car la saisie semi-automatique est très personnalisable. Si vous connaissez le javascript, vous devriez être en mesure de le résoudre. Sinon, je peux vous donner quelques conseils, comme je l'ai déjà fait une fois auparavant, mais méfiez-vous que je ne connais pas bien le javascript moi-même, alors restez avec moi.
Je pense que la première chose que vous devez faire est simplement d'obtenir un simple champ de texte de saisie semi-automatique travaillant sur votre page, puis vous pouvez le personnaliser à partir de là.
Le widget de saisie semi-automatique accepte les données JSON car il s'agit de l'option 'source:'. Vous devez donc configurer votre application pour produire les 20 catégories et sous-catégories de premier niveau au format JSON.
La prochaine chose à savoir est que lorsque l'utilisateur tape dans votre champ de texte, le widget de saisie semi-automatique enverra les valeurs saisies dans un paramètre appelé "terme".
Supposons donc que vous ayez d'abord configuré votre site pour fournir les données JSON à partir d'une URL comme celle-ci:
/categories.json
Ensuite, votre option de saisie semi-automatique source: serait "source: /categories.json".
Lorsqu'un utilisateur tape dans le champ de texte, tel que ' first-cata ...', le widget de saisie semi-automatique commencera à envoyer la valeur dans le paramètre 'term' comme ça:
/categories.json?term=first-cata
Cela renverra les données JSON au widget filtré par tout ce qui correspond à ' first-cata ', et cela est affiché comme une suggestion de saisie semi-automatique.
Je ne sais pas dans quoi vous programmez, mais vous pouvez spécifier comment le paramètre "term" trouve une correspondance. Vous pouvez donc personnaliser cela, afin que le terme trouve une correspondance au milieu d'un mot si vous le souhaitez. Par exemple, si l'utilisateur tape ' ou ' votre code pourrait faire une correspondance sur 'sp ou ts '.
Enfin, vous avez indiqué que vous souhaitez pouvoir sélectionner un nom de catégorie, mais que le widget de saisie semi-automatique soumette l'ID de catégorie et non le nom.
Cela peut facilement être fait avec un champ caché. C'est ce qui est montré dans les documents de saisie semi-automatique jQuery.
Lorsqu'un utilisateur sélectionne une catégorie, votre JavaScript doit mettre à jour un champ masqué avec l'ID.
Je sais que cette réponse n'est pas très détaillée, mais c'est principalement parce que je ne sais pas dans quoi vous programmez, mais ce qui précède devrait vous orienter dans la bonne direction. La chose à savoir est que vous pouvez faire pratiquement n'importe quelle personnalisation que vous voulez avec ce widget, si vous êtes prêt à passer du temps à l'apprendre.
Ce sont les traits larges, mais vous pouvez regardez ici pour quelques notes que j'ai prises lorsque j'ai implémenté quelque chose de similaire à ce que vous voulez dans une application Rails.
J'espère que cela vous a aidé.
Cela fonctionne très bien pour moi et j'en fais plus, en écrivant moins avec l'exemple de jQuery modifié.
J'ai défini l'objet select sur ma page, tout comme l'ex jQuery. J'ai pris le texte et l'ai poussé dans un tableau. Ensuite, j'utilise le tableau comme source pour ma saisie semi-automatique. tadaa.
$(function() {
var mySource = [];
$("#mySelect").children("option").map(function() {
mySource.Push($(this).text());
});
$("#myInput").autocomplete({
source: mySource,
minLength: 3
});
}
jQuery 1.8.1 en a un exemple sous la saisie semi-automatique. C'est très simple à mettre en œuvre.