laravel jquery 运行 自定义自动完成 onclick
laravel jquery run custom autocomplet onclick
如果输入 minLength 为 3,我有一个 custom.catcoplete 运行。当我在输入之外单击时,自动完成消失。
现在您必须添加一个字母才能使自动完成重新出现,但我希望在您再次单击输入时自动完成重新出现。
我不知道在哪里添加这个事件监听器。
quicksearch.js:
$(document).ready(function () {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category_caption !== currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category_caption + "</li>");
currentCategory = item.category_caption;
}
that._renderItemData(ul, item);
});
}
});
$('#quicksearch').catcomplete({
source: '/search/quick',
minLength: 3,
classes: {
"ui-autocomplete": "quicksearch"
},
select: function (event, ui) {
if (ui.item.category === "search_further") {
window.location = ui.item.source;
return false;
}
$('#quicksearch').blur();
openViewModal({
type: ui.item.category,
id: ui.item.id,
url: ui.item.source || '',
});
}
}).on("focus", function () {
$(this).catcomplete("search", '');
});
});
有人可以帮我解决吗?
在 onfocus 处理程序中,我更改自:
$(this).catcomplete("search", '');
至:
if (this.value.length > 2) { // if there are enough chars
$(this).trigger('input'); // mimic an input event
}
此外,我在 category_caption 上添加了一个检查:未定义时什么都不做。
var availableTags = [
"ActionScript1",
"ActionScript2",
"ActionScript3",
"ActionScript4",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category_caption = undefined && item.category_caption !== currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category_caption + "</li>");
currentCategory = item.category_caption;
}
that._renderItemData(ul, item);
});
}
});
$('#quicksearch').catcomplete({
source: availableTags,
minLength: 3,
classes: {
"ui-autocomplete": "quicksearch"
},
select: function (event, ui) {
if (ui.item.category === "search_further") {
window.location = ui.item.source;
return false;
}
$('#quicksearch').blur();
}
}).on("focus", function () {
if (this.value.length > 2) {
$(this).trigger('input');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Type...act...</p>
<div class="ui-widget">
<label for="quicksearch">Tags: </label>
<input id="quicksearch">
</div>
如果输入 minLength 为 3,我有一个 custom.catcoplete 运行。当我在输入之外单击时,自动完成消失。
现在您必须添加一个字母才能使自动完成重新出现,但我希望在您再次单击输入时自动完成重新出现。
我不知道在哪里添加这个事件监听器。
quicksearch.js:
$(document).ready(function () {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category_caption !== currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category_caption + "</li>");
currentCategory = item.category_caption;
}
that._renderItemData(ul, item);
});
}
});
$('#quicksearch').catcomplete({
source: '/search/quick',
minLength: 3,
classes: {
"ui-autocomplete": "quicksearch"
},
select: function (event, ui) {
if (ui.item.category === "search_further") {
window.location = ui.item.source;
return false;
}
$('#quicksearch').blur();
openViewModal({
type: ui.item.category,
id: ui.item.id,
url: ui.item.source || '',
});
}
}).on("focus", function () {
$(this).catcomplete("search", '');
});
});
有人可以帮我解决吗?
在 onfocus 处理程序中,我更改自:
$(this).catcomplete("search", '');
至:
if (this.value.length > 2) { // if there are enough chars
$(this).trigger('input'); // mimic an input event
}
此外,我在 category_caption 上添加了一个检查:未定义时什么都不做。
var availableTags = [
"ActionScript1",
"ActionScript2",
"ActionScript3",
"ActionScript4",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category_caption = undefined && item.category_caption !== currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category_caption + "</li>");
currentCategory = item.category_caption;
}
that._renderItemData(ul, item);
});
}
});
$('#quicksearch').catcomplete({
source: availableTags,
minLength: 3,
classes: {
"ui-autocomplete": "quicksearch"
},
select: function (event, ui) {
if (ui.item.category === "search_further") {
window.location = ui.item.source;
return false;
}
$('#quicksearch').blur();
}
}).on("focus", function () {
if (this.value.length > 2) {
$(this).trigger('input');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Type...act...</p>
<div class="ui-widget">
<label for="quicksearch">Tags: </label>
<input id="quicksearch">
</div>