Agregar / eliminar elementos con javascript
Tengo una lista de elementos que se deben filtrar conforme se va escribiendo en un campo de texto, en caso de que no aparezca en la lista filtrada que los pueda añadir, y en caso que si aparezca añadirlo por medio de doble click,
Ya tengo la parte del filtro, no ce como solucionar lo siguiente
Al darle doble click se deben crear como elementos aparte que tenga la opción de eliminar después de haberlas agregado.
La cosa es que no se como agregarlos, y eliminarlos con javascript, supongo que quedaran dentro de un campo de texto o algo porque después debo recuperar los seleccionados con php así mismo con un id asignado
2 Respuestas
Gosto muito de apostar no desporto porque é muito rentável e pode ganhar bom dinheiro se assistir regularmente a eventos desportivos e analisar o jogo. Gosto muito do facto de a casa de apostas mostbet oferecer sempre boas probabilidades e é possível encontrar muitas opções lucrativas para jogar.
¿Tienes un ejemplo con el cual se pueda observar de que manera lo estas implementando?
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<ul id="livefilter-list">
<li><a>cool</a></li>
<li><a>nice</a></li>
<li><a>interesting</a></li>
<li><a>javascript</a></li>
<li><a>css</a></li>
<li><a>html</a></li>
<li><a>script</a></li>
<li><a>international</a></li>
</ul>
</fieldset>
</div>
tengo eso me baso en un script para el filtro , la lista la cargare desde una base de datos, son como 2000 elementos de la lista, hasta ahí el filtro funciona bien y todo, lo que no ce es como agregar los elementos
dado armare la lista con phph no abra problema en agregar a cada uno el elemento onClick=*****, este pedazo es el que no ce como hacer
lo que necesito es armar una lista, o lo que sea con los elementos seleccionados y que se muestre como en la imagen que puse anteriormente, con la posibilidad de eliminarlos si lo inserte mal
Intenta con esto (he incluido las librerías en el head de manera intencional)
<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
if($("#livefilter-input").val()!=""){
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='selección[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
}
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='agregar'>
<ul id="livefilter-list">
<li><a>cool</a></li>
<li><a>nice</a></li>
<li><a>interesting</a></li>
<li><a>javascript</a></li>
<li><a>css</a></li>
<li><a>html</a></li>
<li><a>script</a></li>
<li><a>international</a></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>
esto resuelve la parte del campo de texto en caso de lo que se busca no este en la lista
, pero si esta en la lista como seria, es decir la lista debería estar así;
<ul id="livefilter-list">
<li onClick="agregar a seleccionados">cool</li>
<li onClick="agregar a seleccionados">nice</li>
</ul>
o así
<ul id="livefilter-list">
<li>cool<input type"button" onClick="agregar a seleccionados"></li>
<li>nice<input type"button" onClick="agregar a seleccionados"></li>
</ul>
es decir que cumpla la misma función del botón superior de agregar pero para cada uno de los elementos de la lista.
Probemos con esta solución previa a ver si vamos encaminados:
<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
if($("#livefilter-input").val()!=""){
if($("#livefilter-list > li:visible").length!=0){
$("#livefilter-list > li:visible").each(function(){
//alert($(this).children("a").text());
campo="<div>"+$(this).children("a").text()+"<input type='hidden' value='seleccion[]' value='"+$(this).children("a").text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
}else{
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='seleccion[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
}
}
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='agregar'>
<ul id="livefilter-list">
<li><a>cool</a></li>
<li><a>nice</a></li>
<li><a>interesting</a></li>
<li><a>javascript</a></li>
<li><a>css</a></li>
<li><a>html</a></li>
<li><a>script</a></li>
<li><a>international</a></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>
tal como lo planteas es por ejemplo al escribir la letra c, agrega todas las conincidecias, y no va por ahí, la idea es que pueda llamar a la funciona agregar desde cada uno de los elementos de al lista es decir
-item 1 (botón agregar)
-item 2 (botón agregar)
así , que cada item tenga el botón de agregarse , o en su defecto que al darle click se agregue pero desde la lista sin necesidad de darle al botón superior agregar, ya si no hubo coincidencias, agregara el texto del campo superior
Ok, veamos que tal es esta opción
<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
if($("#livefilter-input").val()!=""){
if($("#livefilter-list > li:visible").length!=0){
$("#livefilter-list > li:visible").each(function(){
//alert($(this).children("a").text());
campo="<div>"+$(this).children("a").text()+"<input type='hidden' value='seleccion[]' value='"+$(this).children("a").text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
}else{
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='seleccion[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
}
}
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
$("#livefilter-input").keyup(function(){
if($("#livefilter-list > li:visible").length==0){
$("#btn-agregar").fadeIn("slow");
}else{
$("#btn-agregar").fadeOut("slow");
}
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='Agregar Texto' style="display: none;">
<ul id="livefilter-list">
<li><a>cool</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>nice</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>interesting</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>javascript</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>css</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>html</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>script</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>international</a> <input type='button' value='Agregar' class='agregador'></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>
Olvide un detalle:
Agrega este bloque dentro del método ready en el header
$('#livefilter-list').on('click', '.agregador', function() {
campo="<div>"+$(this).prev().text()+"<input type='hidden' value='seleccion[]' value='"+$(this).prev().text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
No ce, le doy clic al botón agregar y no hace nada
No ce, le doy clic al botón agregar y no hace nada, la idea que permanezcan las dos opciones
es decir digite una palabra que no estaba, entonces sigue el botón agregar del campo texto y le adiciono normal
la otra es que escribí parcialmente una palabra y ahí por ejemplo 5 palabras similares en la lista, ya direrctamente puedo darle click al botón agregar de cada uno de los elementos de la lista y agregarlo sin que desaparezca el botno supoerior de agregar
Entiendo, entonces la solución sería esta:
<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='selección[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
$('#livefilter-list').on('click', '.agregador', function() {
campo="<div>"+$(this).prev().text()+"<input type='hidden' value='selección[]' value='"+$(this).prev().text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='Agregar Texto'>
<ul id="livefilter-list">
<li><a>cool</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>nice</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>interesting</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>javascript</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>css</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>html</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>script</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>international</a> <input type='button' value='Agregar' class='agregador'></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>