在 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。我建议遵循 changes/updates 您的代码

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

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

添加了一个新函数来处理按钮切换
从 source 属性中隐藏导入按钮，即当用户键入一些输入时以及当输入框为空白时
当用户选择自动完成选项时显示导入按钮

工作代码link: https://plnkr.co/edit/PgzUuOADhIqk9zbl?preview

希望这能解决您的问题

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

Display another button with autocomplete in JS

javascript

jquery-ui-autocomplete