键入时不要显示jQuery UI自动完成
Do not show jQuery UI Autocomplete when typing
我正在使用jQuery UI自动完成功能来显示文本输入的自动完成。我想要更逼真的列表何时出现。我已经为Click和Double Click制作了触发器,它们显示自动完成(基于用户是否选择包含每个触发器),但我没有发现影响自动完成在键入时是否显示的方法。
如何使键入时不显示自动完成(不由关键事件触发)?
回答
function InitialiseAutoCompleteEx(inputId, trigOnClick, trigOnDoubleClick, trigOnType, trigOnCtrlSpace, rawAutoCompleteItems)
{
var autoCompleteItems = rawAutoCompleteItems.split("|");
var input = $("#" + inputId);
input.autocomplete(
{
source: autoCompleteItems,
minLength: 0,
disabled: true,
close: function() { $(this).autocomplete("option", "disabled", true); }
});
if (trigOnClick)
{
input.click(function()
{
$(this).autocomplete("option", "disabled", false);
$(this).autocomplete("search");
});
}
if (trigOnDoubleClick)
{
input.dblclick(function()
{
$(this).autocomplete("option", "disabled", false);
$(this).autocomplete("search");
});
}
if (trigOnType)
{
input.keydown(function(event)
{
var key = String.fromCharCode(event.which);
if ( /[a-zA-Z0-9]/.test(key) )
{
$(this).autocomplete("option", "disabled", false);
$(this).autocomplete("search");
}
});
}
if (trigOnCtrlSpace)
{
input.keydown(function(event)
{
if (event.which == 32 && event.ctrlKey)
{
$(this).autocomplete("option", "disabled", false);
$(this).autocomplete("search");
event.preventDefault();
}
});
}
}
只需使用其disabled
选项:
$("#field").autocomplete("option", "disabled", true);
var tags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#field").autocomplete({
source: function(request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(tags, function(item) {
return matcher.test(item);
}));
},
disabled: true,
});
function disable(shouldDisable) {
shouldDisable = JSON.parse(shouldDisable); // Extract boolean from string parameter
$("#field").autocomplete("option", "disabled", shouldDisable);
$("#field").focus().trigger($.Event("keydown"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input id="field" />
<button onclick="disable(false);">Autocomplete On</button>
<button onclick="disable(true);">Autocomplete Off</button>
相关文章:
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery UI对话框不会消失
- 无限循环onsen UI + jquery
- Ignite UI - (jQuery) - 无法使用 ig.excel.WorksheetCellComment 在单
- 可排序的UI jquery的奇怪行为