在JS中显示另一个具有自动完成功能的按钮

Question

我正在字符串中从json url自动完成，效果很好。

现在我想要的是，当我点击自动完成时，我想显示导入按钮，如果输入为空或我们放置了一个新值(不在导入中(，则显示创建按钮。

给你一个关于我对一些数据做什么的例子：

$('#search-deal').autocomplete({
source: function(request, response) {
var data =[{
"id": 1671,
"title": "Queens Park Tyres deal"
}, {
"id": 1672,
"title": "Wildman Craft Lager deal"
}, {
"id": 1673,
"title": "General Store deal"
}, {
"id": 1674,
"title": "Deluxe Off Licence deal"
}, {
"id": 1675,
"title": "Ahmed Halal Bazaar deal"
}];

var datamap = data.map(function(i) {
return {
label: i.id + ' - ' + i.title,
value: i.id + ' - ' + i.title,
desc: i.title
}
});

var key = request.term;

datamap = datamap.filter(function(i) {
if(i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0){
document.getElementById("create").style.visibility = 'hidden';
document.getElementById("import").style.visibility = 'visible';
return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
};
});
response(datamap);
},
minLength: 1,
delay: 100
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input type="text" id="search-deal" />
<button id="create" type="submit" class="btn btn-primary">Créer une affaire</button>
<button id="import" type="submit" style="visibility:hidden" class="btn btn-primary">Importer</button>

这里的问题是，当我写"；p〃；，按钮导入显示，我只想在单击自动完成时显示。第二个问题是，如果值为空或放入另一个值，则按钮创建永不返回

有人能帮我吗？

Answer 1

我从共享片段中了解到您正在使用jquery ui autocomplete。我建议对您的代码进行以下更改/更新

1. 要更改选择自动完成项目时的按钮显示，请使用select事件。https://api.jqueryui.com/autocomplete/#event-选择
2. 每当用户键入内容时，隐藏导入按钮。仅在选择项目时显示它
3. 对于处理空输入情况，请使用oninput事件

我对您共享的代码进行了以下更改

1. 添加了一个新功能来处理按钮切换
2. 在source属性中隐藏导入按钮，即当用户键入某些输入时以及当输入框为空时
3. 当用户选择自动完成选项时显示导入按钮

工作代码链接：https://plnkr.co/edit/PgzUuOADhIqk9zbl?preview

我希望这能解决你的问题