Ajouter des capacités à remplir automatiquement jQuery-UI 1.8.1
-
05-10-2019 - |
Question
voici ce que j'ai actuellement, je ne peux malheureusement pas sembler comprendre comment obtenir autoFill
à travailler avec jQuery-UI ... Il permet de travailler avec la droite jusqu'à Autocomplete.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var thesource = "RegionsAutoComplete.axd?PID=3"
$(function () {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
$.expr[':'].textEquals = function (a, i, m) {
return $(a).text().match("^" + m[3] + "$");
};
$("#regions").autocomplete({
source: thesource,
change: function (event, ui) {
//if the value of the textbox does not match a suggestion, clear its value
if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
$(this).val('');
}
else {
//THIS IS CURRENTLY NOT "LOGGING" THE "UI" DATA
//IF THE USER DOES NOT EXPLICITLY SELECT
//THE SUGGESTED TEXT
//PLEASE HELP!!!
log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
}
}
}).live('keydown', function (e) {
var keyCode = e.keyCode || e.which;
//if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion
if ((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
$(this).val($(".ui-autocomplete li:visible:first").text());
}
});
});
</script>
Mon JSON dans les regards d'extrémité arrière comme celui-ci
[
{ "label": "Canada", "value": "Canada", "id": "1" },
{ "label": "United States", "value": "United States", "id": "2" },
]
Je l'ai utilisé la réponse ici pour obtenir le travail de mustMatch, mais malheureusement si je « onglet » loin de la zone d'entrée ou si je tape le mot complètement plutôt que de choisir réellement le texte proposé, je reçois le « Rien sélectionné » réponse au lieu d'une valeur et ID.
Quelqu'un sait comment extraire l'ID de la saisie semi-automatique lorsque vous ne sélectionnez pas réellement sur le terrain?
En fait, ce que je suis à la recherche est quelque chose de similaire à l'exemple de Month (local):
cliquez ICI: http: //jquery.bassistance.de/autocomplete/demo/
Mais en utilisant évidemment la jQuery-UI au lieu de jquery.autocomplete.js
La solution
AutoFill a été dépréciée dans la version JQuery UI de saisie semi-automatique, et le plug-in jquery.autocomplete n'est plus pris en charge.
Voici un lien . à un solutiuon github Cela permet de sélectionner automatiquement le premier élément dans la liste si vous onglet sur le terrain, et ont « SelectFirst: true ». jeu en option sur votre appel autocomplete
(function( $ ) {
$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
var autocomplete = $( this ).data( "autocomplete" ),
menu = autocomplete.menu;
if ( !autocomplete.options.selectFirst ) {
return;
}
menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});
}( jQuery ));
Autres conseils
DEMO: http://jsbin.com/akile3
MISE À JOUR 2: avec le soutien TAB! ;)
DEMO: http://jsbin.com/akile3/8
essayer quelque chose comme ceci:
ne sais pas si ce que vous voulez, de toute façon il mot autofill entier si quelque chose de match!
$(function() {
var json_source = [
{ "label": "Canada", "value": "Canada", "id": "1" },
{ "label": "United States", "value": "United States", "id": "2" }];
$('<span id="hold"></span>').insertAfter('#regions');
var $text_was = $('#hold');
var $log = $('#log');
$("#regions").autocomplete({
minLength: 3,
source: json_source,
open: function(event, ui) {
var first_option = $('.ui-autocomplete li:eq(0) a').text();
$(this).text(first_option);
$text_was.text(first_option);
},
change: function(event, ui) {
var prev_text = $text_was.text() ? $text_was.text() : json_source[0].value ;
$log.empty();
var message = (prev_text != this.value) ?
'Nothing selected, input was ' + prev_text :
'Selected: ' + ui.item.value + ' aka ' + ui.item.id;
if (prev_text != this.value)
$(this).val( prev_text );
$log.append(message);
},
select: function(event, ui) {
$text_was.text(ui.item.value);
$(this).blur();
}
}).blur(function(){
if( this.value == '' )
$(this).autocomplete('search', json_source[0].value );
return false;
});
});
Si vous voulez simplement remplir automatiquement c'est le code que je utilise.
$("#regions").autocomplete({
source: thesource
}).live('keydown', function (e) {
var keyCode = e.keyCode || e.which;
//if TAB or RETURN is pressed set the value of the textbox to the text of the first suggestion
if ((keyCode == 9 || keyCode == 13) && $(".ui-autocomplete").is(":visible")) {
$(this).val($(".ui-autocomplete li:visible:first").text());
}
});