Jquery Autocomplete verschieben Elemente in neue div

Question

Ich versuche, eine Einkaufsliste mit Autocomplete zu machen. Wenn Sie auf die Schaltfläche Hinzufügen treffen würde ich wollen, dass diese das Element in die Einkaufsliste bewegen, aber ich bin immer undefined

https://fiddle.jshell.net/ktcle/pbmL2q1e/1/

<input type="text" id="auto" /> 
    <button id="click"> 
    Add to your selection 
    </button> 

    <button id="add" class="hidden">Item does not exist. Click here to add it.</button> 

    <div id="your-selection"> 
    your shopping list 


    </div> 

und die js

var source = ["Apples", "Oranges", "Bananas", "Grapes", "Bread", "Milk"]; 

    $(function() { 
     $("#auto").autocomplete({ 
      source: function (request, response) { 
       response($.ui.autocomplete.filter(source, request.term)); 
       $('#outputcontent').html(thehtml); 
      }, 
      change: function (event, ui) { 
       $("#add").toggle(!ui.item); 
      } 
     }); 


     $("#click").on("click", function (request) { 
      var thehtml = '<strong>Item:</strong> ' + request.source; 
      $('#your-selection').html(thehtml); 
     }); 


     $("#add").on("click", function() { 
      source.push($("#auto").val()); 
      $(this).hide(); 
     }); 
    }); 

Answer 1

Um ausgewählte Element zu erhalten, benutzen Sie bitte $("#auto").val(). Bitte untenstehenden Code für das gleiche prüfen.

$("#click").on("click", function() { 
    var newSelected = $("#auto").val(); 
    var thehtml = '<br/>' + $("#auto").val(); 
    var selectedItems = $('#your-selection').html(); 
    if(selectedItems.indexOf(newSelected) === -1){ 
     $('#your-selection').append(thehtml); 
    }else{ 
     alert("Already selected!"); 
    } 
    $("#auto").val(''); 
}); 

Bitte Snippet unten für mehr Verständnis

var source = ["Apples", "Oranges", "Bananas", "Grapes", "Bread", "Milk"]; 
 

 
$(function() { 
 
    $("#auto").autocomplete({ 
 
    source: function (request, response) { 
 
     response($.ui.autocomplete.filter(source, request.term)); 
 
     //$('#outputcontent').html(thehtml); 
 
    }, 
 
    change: function (event, ui) { 
 
     $("#add").toggle(!ui.item); 
 
    } 
 
    }); 
 

 

 
    $("#click").on("click", function() { 
 
    var newSelected = $("#auto").val(); 
 
    var thehtml = '<br/>' + $("#auto").val(); 
 
    var selectedItems = $('#your-selection').html(); 
 
    if(selectedItems.indexOf(newSelected) === -1){ 
 
     $('#your-selection').append(thehtml); 
 
    }else{ 
 
     alert("Already selected!"); 
 
    } 
 
    $("#auto").val(''); 
 
    }); 
 

 

 
    $("#add").on("click", function() { 
 
    source.push($("#auto").val()); 
 
    $(this).hide(); 
 
    }); 
 
});

.hidden { display: none; } 
 

 
#your-selection{margin: 1em 0; background: pink; width: 200px; padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<input type="text" id="auto" /> 
 
<button id="click"> 
 
    Add to your selection 
 
</button> 
 

 
<button id="add" class="hidden">Item does not exist. Click here to add it.</button> 
 

 
<div id="your-selection"> 
 
    your shopping list Items 
 
</div>