Cuando el cuadro de texto de autocompletar se expande y el usuario se desplaza por la página del navegador, el cuadro permanece en la misma posición y no desaparece. Estoy de acuerdo con que esté abierto si se mantiene en la misma posición, pero no entiendo por qué permanece en el mismo lugar en desplazamiento.jQuery El cuadro Autocompletar permanece abierto y en la misma posición cuando se desplaza
function ($) {
$.widget("ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "";
var input = this.input = $("<input id='innertextbox'>")
.insertAfter(select)
.autocomplete({
delay: 0,
minLength: 0,
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;
self._trigger("selected", event, {
item: ui.item.option
});
if (jQuery(ui.item.option).hasClass('_self'))
window.location.href = ui.item.option.value;
else
window.open(ui.item.option.value,'_newtab');
},
change: function (event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function() {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
}); var innerBoxValue = $("#innertextbox").val();
if (!valid && innerBoxValue != "Daily Needs...") {
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
})
.addClass("ui-widget ui-widget-content");
input.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
this.button = $("<button type='button' id='dailyNeedsButton'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-button-icon")
.click(function() {
jQuery("#innertextbox").val("");
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
jQuery(document).ready(function() {
jQuery("#dailyNeedsSelect").combobox();
jQuery("#innertextbox").blur(function() {
jQuery("#innertextbox").val("Daily Needs...");
});
jQuery("#innertextbox").val("Daily Needs...");
jQuery(".ui-autocomplete").position({ my: "right top", at: "right bottom", of: jQuery("#innertextbox"), collision: "flip flip" });
jQuery("#dailyNeedsButton").blur(function() { jQuery("#innertextbox").val("Daily Needs..."); });
jQuery("#innertextbox").focus(function() { if (jQuery("#innertextbox").val() == "Daily Needs...") jQuery("#innertextbox").val(""); });
jQuery("#innertextbox").bind("click", function() {
jQuery("#innertextbox").val("");
});
});
Cualquier enlaces/jsFiddle/código que puede proporcionar? Pregunta como esta realmente no puede ser respondida. – elclanrs
Agregué el código aunque no está formateando correctamente y estoy tratando de solucionar este problema, así que no estoy pasando tiempo en eso ... – kav
que 'autocomplete plugin' que está usando; Hay un montón de afuera. mencione el enlace del complemento al menos – diEcho