Skip to main content
Correción de formato
Origen Enlace
Diego Mesa
  • 1.6k
  • 6
  • 10

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>

No es buena practica usar el nya como identificador de la cliente, debes pasar a tu respuesta de busqueda el id asi.

var clients_list = []

function handleAutocompleClients(text = '', listItem = clients_list, idContainer = "clients_select"){
   // buscar solo si lista vacia y nyq mayor a 2
   if(listItem.length == 0 && text.length > 2){
      fetchBuscar().then(addAutcompleteItems(text,listItem))
   } else {
    if(listItem.length > 0 && text.length != 0 ){
      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 = ''
  let stringItems = list.sort((a,b)=>{
    return b[value].split(text).length - a[value].split(text).length
  }).map((item) => {
    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)
  })
}


//...
//....
// 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!
  }, 250);
})
}
.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>

No es buena practica usar el nya como identificador del 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"){
   // 2. Valido si es necesario buscar en la base de 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 = ''
  sortListForFoundText(list,text,value)
    .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
 })
}

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]
    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!
  }, 120);
})
}
.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>
se añadieron 2949 caracteres en el cuerpo
Origen Enlace
Diego Mesa
  • 1.6k
  • 6
  • 10

No es necesario $listaLote porque lo puedes hacer por javascript, dado que estas buscando por nya: nombre y apellido puede restringir la solicitud de búsqueda solo cuando se digiten más de 2 3 palabras. ( eso optimizará tu auto-completador )

No es buena practica usar el nya como identificador de la cliente, debes pasar a tu respuesta de busqueda el id asi.

public function getBuscar($name){
        $sql = "SELECT id,nya FROM cliente WHERE nya LIKE :name";
        $stmt = $this->connect()->prepare($sql);
        $stmt->execute(['name' => '%' . $name . '%']);
        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $data;
    }

Para que al seleccionar se vean como etiquetas para que sean varias opciones como etiquetas, puedes encerrar tus elementos seleccionados y el input de búsqueda en una misma caja.

var clients_list = []

function cambiohandleAutocompleClients(text = '', listItem = clients_list, idContainer = "clients_select"){
  js_c_label // buscar solo si lista vacia y nyq mayor a 2
   if(listItem.innerTextlength == 0 && text.length > 2){
      fetchBuscar().then(addAutcompleteItems(text,listItem))
   } else {
    if(listItem.length > 0 && text.length != ""0 ){
      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 = ''
  let stringItems = list.sort((a,b)=>{
    return b[value].split(text).length - a[value].split(text).length
  }).map((item) => {
    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)
  })
}


//...
//....
// 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!
  }, 250);
})
}
.clientsautocomplete {
  position: relative;
}

.autocomplete_input {
  border: 1px solid #b2b2b2;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  margin: 0;
}

.clients_tagautocomplete_tag {
  font-size: .9rem;
  border: 1px solid #b2b2b2;
  border-radius: 5px;
  padding: 2px 5px;
  margin-right: 5px;
}

.clients_inputautocomplete_field {
  position: relative;
}

.clients_inputautocomplete_field input {
  border: none;
}

.clients_input labelautocomplete_select {
    position: absolute;relative;
    display: flex;
    flex-direction: column;
    left: 0;5px;
  opacity  padding: 5px 15px;
    border: 1px solid #b2b2b2;
}

.5;autocomplete_item {
  text-shadow  display: 0block;
}

.autocomplete_item:hover 0{
 5px 2px #fffff; background-color: #f5f5f5;
}
<div><div class="autocomplete">
<ul class="clients">class="autocomplete_input">
<span class="clients_tag"id="0" class="autocomplete_tag" onclick="this.remove()">Client Name</span>
<span class="clients_input">
<label for="client" id="js_c_label">Add or created cliente</label>class="autocomplete_field">
<input name="client" id="client" class="" onkeyup="cambioonkeyup="handleAutocompleClients(this.value)">" placeholder="add or create clients">
</span>
 
</ul>
<div id="autocomplete_select" class="autocomplete_select">
</div>
</div>

Para que al seleccionar se vean como etiquetas para que sean varias opciones, puedes encerrar tus elementos seleccionados y el input de búsqueda en una misma caja.

function cambio(){
  js_c_label.innerText = ""
}
.clients {
  border: 1px solid #b2b2b2;
  padding: 5px;
  border-radius: 5px;
  display: flex;
}

.clients_tag {
  font-size: .9rem;
  border: 1px solid #b2b2b2;
  border-radius: 5px;
  padding: 2px 5px;
  margin-right: 5px;
}

.clients_input {
  position: relative;
}

.clients_input input {
  border: none;
}

.clients_input label {
  position: absolute;
  left: 0;
  opacity: .5;
  text-shadow: 0 0 5px 2px #fffff;
}
<div>
<ul class="clients">
<span class="clients_tag" onclick="this.remove()">Client Name</span>
<span class="clients_input">
<label for="client" id="js_c_label">Add or created cliente</label>
<input name="client" id="client" class="" onkeyup="cambio()">
</span>
 
</ul>
</div>

No es necesario $listaLote porque lo puedes hacer por javascript, dado que estas buscando por nya: nombre y apellido puede restringir la solicitud de búsqueda solo cuando se digiten más de 2 3 palabras. ( eso optimizará tu auto-completador )

No es buena practica usar el nya como identificador de la cliente, debes pasar a tu respuesta de busqueda el id asi.

public function getBuscar($name){
        $sql = "SELECT id,nya FROM cliente WHERE nya LIKE :name";
        $stmt = $this->connect()->prepare($sql);
        $stmt->execute(['name' => '%' . $name . '%']);
        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $data;
    }

Para que al seleccionar se vean varias opciones como etiquetas, puedes encerrar tus elementos seleccionados y el input de búsqueda en una misma caja.

var clients_list = []

function handleAutocompleClients(text = '', listItem = clients_list, idContainer = "clients_select"){
   // buscar solo si lista vacia y nyq mayor a 2
   if(listItem.length == 0 && text.length > 2){
      fetchBuscar().then(addAutcompleteItems(text,listItem))
   } else {
    if(listItem.length > 0 && text.length != 0 ){
      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 = ''
  let stringItems = list.sort((a,b)=>{
    return b[value].split(text).length - a[value].split(text).length
  }).map((item) => {
    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)
  })
}


//...
//....
// 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!
  }, 250);
})
}
.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>
Origen Enlace
Diego Mesa
  • 1.6k
  • 6
  • 10

Debes tener en cuenta la optimización de la consulta, buscar con la primera letra te retornara demasiados datos, que generan tiempos de espera largos.

Agregar selección por etiquetas.

Para que al seleccionar se vean como etiquetas para que sean varias opciones, puedes encerrar tus elementos seleccionados y el input de búsqueda en una misma caja.

function cambio(){
  js_c_label.innerText = ""
}
.clients {
  border: 1px solid #b2b2b2;
  padding: 5px;
  border-radius: 5px;
  display: flex;
}

.clients_tag {
  font-size: .9rem;
  border: 1px solid #b2b2b2;
  border-radius: 5px;
  padding: 2px 5px;
  margin-right: 5px;
}

.clients_input {
  position: relative;
}

.clients_input input {
  border: none;
}

.clients_input label {
  position: absolute;
  left: 0;
  opacity: .5;
  text-shadow: 0 0 5px 2px #fffff;
}
<div>
<ul class="clients">
<span class="clients_tag" onclick="this.remove()">Client Name</span>
<span class="clients_input">
<label for="client" id="js_c_label">Add or created cliente</label>
<input name="client" id="client" class="" onkeyup="cambio()">
</span>

</ul>
</div>