Wątek przeniesiony 2023-10-14 10:08 z JavaScript przez Riddle.

Autocomplete podpowiadający nazwy styli

0

Wtam
Chyba powinno wyświetlić wszystkie elementy na "d"?
ms edge
1.jpg2.jpg3.jpg

0

Jakim kodem to tworzysz?

0
let s1 = `style="display:inline;flex-direction:row;justify-content:center;`;
    s1 += `align-items:center;width:26%;margin:1.5;"`;
let s2 = `style="display:inline;flex-direction:row;justify-content:center;`;
    s2 += `align-items:center;width:60%;margin:1.5;"`;
                               
    for(let i = 0, j = 0;i < styling.length; i++){
                                                  if(styling.charCodeAt(i) == 59){
                                                                                  size++;}}
    for(let i = 0, j = 0,k=0;i < styling.length; i++){
                                                           
                                                           
                       if(styling.charCodeAt(i) != 58 && styling.charCodeAt(i) != 59){h += styling[i];}
                                 if(styling.charCodeAt(i) == 58){
       txt += `<div name="`+j+`"><input  `+s1+` value="`+h+`"  `+obsl+` list="`+i+`"/>`;
       txt +=  ggg.replace("idprops",i);tmp[j].push(h);h = "";}
                                                           
       if(styling.charCodeAt(i) == 59){
                                       
       txt += `<input `+s2+` value="`+h+`" list="x`+i+`"/>`;
       txt += `ggg.replace("idprops","x"+i)+`<button onClick="this.parentNode.remove();">-</button></div>`;
                                                            
                                       tmp[j].push(h);k++;h = "";j++;}
                                       if(k==size){break;} tmp.push([]);}

:|

0

Rozwiązanie:

/*
Tworzenie elementu input z podpietym zbiorem dataset do niego

Parametry:

"elem" - miejsce gdzie zostaną wpięte input i dataset
"id"   - jakaś tam nazwa
"elem" - lista tekstów

*/


function createSelectedInput(elem, id, lista){

    let moj_input = document.createElement("INPUT");
        moj_input.lista = lista;
        moj_input.value = lista[0];
        elem.appendChild(moj_input);
    
        moj_input.addEventListener("input", function() {
            this.fill();
        });
 
        moj_input.setAttribute("list", id);

        moj_input.fill = function(){
                                    let txt = "";
                                    for(let i = 0; i < this.lista.length; i++){ 
                                               if(this.lista[i].startsWith(this.value) || this.value == ""){
                                                          txt += "<option value='" + this.lista[i] + "'>";}}
                                        
                                    
        
                                    let moje_dataset = document.getElementById(id);
                                        moje_dataset.innerHTML = txt;}
    

    let moje_dataset = document.createElement("DATALIST");
        moje_dataset.setAttribute("id", id);
        elem.appendChild(moje_dataset);
        moj_input.fill();}

Przykład:

<html lang="pl">
<head>
<meta charset="utf-8" />
</head>
<body>
<div></div>
<script>

function createSelectedInput(elem, id, lista){

    let moj_input = document.createElement("INPUT");
        moj_input.lista = lista;
        moj_input.value = lista[0];
        elem.appendChild(moj_input);
    
        moj_input.addEventListener("input", function() {
            this.fill();
        });
 
        moj_input.setAttribute("list", id);

        moj_input.fill = function(){
                                    let txt = "";
                                    for(let i = 0; i < this.lista.length; i++){ 
                                        if(this.lista[i].startsWith(this.value) || this.value == ""){
                                            txt += "<option value='" + this.lista[i] + "'>";}}
                                        
                                    
        
                                    let moje_dataset = document.getElementById(id);
                                        moje_dataset.innerHTML = txt;}
    

    let moje_dataset = document.createElement("DATALIST");
        moje_dataset.setAttribute("id", id);
        elem.appendChild(moje_dataset);
        moj_input.fill();}



createSelectedInput(document.querySelectorAll("DIV")[0],"kolory_id",["biały","czarny","czerwony","zielony"," żółty","szary"]);
</script>
</body>
</html>

1.jpg2.jpg

1 użytkowników online, w tym zalogowanych: 0, gości: 1