Zeigen Sie eine weitere Schaltfläche mit automatischer Vervollständigung in JS an

Ich versuche, eine automatische Vervollständigung von der JSON-URL zu machen, es funktioniert gut.

Was ich jetzt will, ist es, wenn ich auf die automatische Vervollständigung klicke, möchte ich die Importschaltfläche anzeigen und wenn die Eingabe leer ist oder wir einen neuen Wert eingeben (nicht im Import), die Schaltfläche "Erstellen" anzeigen.

Geben Sie ein Beispiel dafür, was ich mit einigen Daten mache:

$('#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>

Lösung des Problems

Wie ich dem freigegebenen Snippet entnehmen kann, verwenden Sie jquery ui autocomplete. Ich würde folgende Änderungen/Aktualisierungen an Ihrem Code vorschlagen

Verwenden Sie zum Ändern der Schaltflächenanzeige bei der Auswahl des Autocomplete-Elements selectevent. https://api.jqueryui.com/autocomplete/#event-select

Wenn der Benutzer etwas eingibt, blenden Sie die Importschaltfläche aus. Zeigt es nur an, wenn ein Element ausgewählt ist.

Verwenden Sie oninputevent, um leere Eingabefälle zu behandeln.

Ich habe die folgenden Änderungen an dem von Ihnen freigegebenen Code vorgenommen

Eine neue Funktion hinzugefügt, um das Umschalten von Schaltflächen zu handhaben

Blenden Sie die Importschaltfläche aus der sourceEigenschaft aus, dh wenn der Benutzer eine Eingabe macht und auch wenn das Eingabefeld leer ist

Zeigen Sie die Importschaltfläche an, wenn der Benutzer eine Option zur automatischen Vervollständigung auswählt

Link zum Arbeitscode: https://plnkr.co/edit/PgzUuOADhIqk9zbl?preview

Ich hoffe, das löst Ihr Problem