jquery自動完成將項目移動到新的div

我正在嘗試使用自動完成進行購物列表。當你點擊添加按鈕，我想這將項目移動到shoppinglist但我正在逐漸未定義jquery自動完成將項目移動到新的div

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>

和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(); 
     }); 
    });

來源

2016-09-21 user3665791

在一次只能有一個項目可以在購物清單中添加。對？ –

沒有他們，要創建列表，所以它始終填充下面的div – user3665791

如果用戶選擇蘋果，然後將其添加到列表中，然後文本框將變空，用戶可以選擇另一個項目，並可以將其添加到列表等在...我是對的嗎？ –

要獲得所選的項目，請使用$("#auto").val()。請檢查下面的代碼是否相同。

$("#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(''); 
});

請檢查以下內容片段在更多的瞭解

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>

來源

2016-09-21 11:03:42

輝煌，謝謝 – user3665791

jquery自動完成將項目移動到新的div

回答

相關問題