No es buena practica usar el nya
como identificador de ladel cliente, debes pasar a tu respuesta de busqueda el id
asi.
var clients_list = []
// 1. Creo busqueda cada vez que cambia el input
function handleAutocompleClients(text = '', listItem = clients_list, idContainer = "clients_select"){
// buscar2. soloValido si listaes vacianecesario ybuscar nyqen mayorla abase 2de datos
if(listItem.length == 0 && text.length > 2){
// 3. Busco en Base de Datos
// 4. Guardo la busqueda en local
fetchBuscar().then(addAutcompleteItems(text,listItem))
} else {
if(listItem.length > 0 && text.length != 0 ){
// 5. Muestro el Resultado
renderAutocompleteItem(listItem,'id','name', text)
} else {
renderAutocompleteItem([],'id','name', text)
}
}
}
function addAutcompleteItems(text, list){
return fetchBuscar().then((data)=>{
return JSON.parse(data)
}).then((data) => {
addNotRepeatToList(data, list)
})
}
function addNotRepeatToList(data, list){
let ids = list.map((i) => { return i.id })
list.push(
...data.filter((item) => {
return ids.indexOf(item.id) === -1
}))
}
function renderAutocompleteItem(list, key, value, text = ' '){
let container = document.getElementById('autocomplete_select')
container.innerHTML = ''
letsortListForFoundText(list,text,value)
stringItems = .map((item) => {
container.appendChild(createAutocompleteItem(item,text,key,value))
})
}
function sortListForFoundText(list,text,value){
return list.sort((a,b) => {
return b[value].split(text).length - a[value].split(text).length
}).map(
}
function createAutocompleteItem(item), =>text, key, value){
let element = document.createElement('span')
element.class = "autocomplete_item"
let content = item[value].split(text)
.join('<strong>'+text+'</strong>')
element.innerHTML = content
element.id = item[key]
container.appendChild(element)
return })element
}
//...
//....
// aqui simulo la peticion a buscar.php
function fetchBuscar(){
return new Promise((resolve,rejected)=>{ setTimeout(function(){
let data = '[{"id":1,"name":"htmlstring"},{"id":2,"name":"mailchimp"}]';
resolve(data); // ¡Todo salió bien!
}, 250120);
})
}
.autocomplete {
position: relative;
}
.autocomplete_input {
border: 1px solid #b2b2b2;
padding: 5px;
border-radius: 5px;
display: flex;
margin: 0;
}
.autocomplete_tag {
font-size: .9rem;
border: 1px solid #b2b2b2;
border-radius: 5px;
padding: 2px 5px;
margin-right: 5px;
}
.autocomplete_field {
position: relative;
}
.autocomplete_field input {
border: none;
}
.autocomplete_select {
position: relative;
display: flex;
flex-direction: column;
left: 5px;
padding: 5px 15px;
border: 1px solid #b2b2b2;
}
.autocomplete_item {
display: block;
}
.autocomplete_item:hover {
background-color: #f5f5f5;
}
<div class="autocomplete">
<ul class="autocomplete_input">
<span id="0" class="autocomplete_tag" onclick="this.remove()">Client Name</span>
<span class="autocomplete_field">
<input name="client" onkeyup="handleAutocompleClients(this.value)" placeholder="add or create clients">
</span>
</ul>
<div id="autocomplete_select" class="autocomplete_select">
</div>
</div>