jquery - jquery的自动完成事件问题
问题描述
我在输入中使用键盘按键事件使用自动完成事件
$(function() {
var availableTags = ["Amsterdam, Netherlands"];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<input type="text" name="server_locations" class="form-control" placeholder="city" id="tags">
我正在使用此代码在我的项目中设置自动完成城市名称
但是当我使用此代码时,我收到了
未捕获的类型错误:无法读取未定义的属性“keyCode”
我不知道为什么会这样。
谁能帮我解决这个问题
解决方案
您的代码段不起作用!
我复制并更改为jquery ui 1.12.1
.
它正在工作!如果您需要任何进一步的信息,请随时发表评论。
$(function() {
var availableTags = ["Amsterdam, Netherlands"];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="server_locations" class="form-control" placeholder="city" id="tags">
推荐阅读
- jquery - Wordpress 中的 Ajax / jQuery 未运行但控制台上没有错误
- r - 如何更改 x 轴刻度
- c# - Nuget Pack 不包括新文件
- spring-cloud-dataflow - 在 kubernetes 上为 spring 云数据流任务和流部署设置节点选择器
- robotframework - 我需要使用的元素在页面上,但 Robot Framework 找不到
- php - 在 HTML 页面上忽略 PHP
- python - 将 Python 与 OpenCV 结合使用时,哪些组件会做什么?
- firebase - Flutter Cloud-functions:如何配置它以调用在 localhost 上运行的函数
- elasticsearch - 如何将 OpenDistro 用于 ElasticSearch?
- c# - 在 C# 中用双指数计算双倍的幂