Resultaat van Datalist om file te selecteren

Status
Niet open voor verdere reacties.

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
Hallo

Ik heb 2 stukjes code gevonden. Eentje op http://www.hongkiat.com/blog/search-select-using-datalist/ waar uitgebreid uitgelegd wordt hoe een datalist te gebruiken voor een dropdownlijstje. En een ander stukje dient om een naam van een foto in een tekstvakje in te brengen en die foto dan te tonen na druk op een button.
Ik wil de 2 nu combineren. Dan kan ik op een mooie manier gebruik maken van de datalist en onmiddellijk een gekozen foto tonen.
Het lukt me niet om dit te doen. Iemand een tip?
Hieronder de datalistcode:
Code:
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>datalijst</title>
    <style>
        body {
  text-align: center;
}

body,
input,
button {
  font-family: palatino;
  font-size: 12pt;
}

input {
  width: 250px;
  height: 30px;
  padding: 3px;
  border: 1px solid #DDE1E4;
}

select {
  width: 258px;
  position: relative;
  left: -17px;
  margin: 0;
  border: 1px solid #DDE1E4;
  border-top: none;
  font-size:9pt;
}

datalist {
  display: none;
}

option {
  padding: 3px;
}

option:hover {
  background-color: #11E8EA;
}

button {
  width: 30px;
  height: 38px;
  position: relative;
  left: -5px;
  border: 1px solid #DDE1E4;
  border-left: none;
  background-color: #11E8EA;
  cursor: pointer;
}

h3,
h4 {
  text-align: center;
}

/* to hide datalist arrow in webkit */
input::-webkit-calendar-picker-indicator {
  display: none;
}
    </style>
</head>
<body>
  
        <h3>Drop-Down</h3>
        <input list=text_editors>
        <button>▼</button>
        <datalist id="text_editors">
            <select multiple size=8>
                <option value="Atom">Atom
                <option value="Brackets">Brackets
                <option value="Notepad ++">Notepad ++
                <option value="Notepad">Notepad
                <option value="Sublime Text">Sublime Text
                <option value="TextEdit">TextEdit
                <option value="TextMate">TextMate
                <option value="Wordpad">Wordpad
            </select>
        </datalist>
    
    <script>
        button = document.querySelector('button');
        datalist = document.querySelector('datalist');
        select = document.querySelector('select');
        options = select.options;

        /* on arrow button click, show/hide the DDL*/
        button.addEventListener('click', toggle_ddl);

        function toggle_ddl() {
            if (datalist.style.display === '') {
                datalist.style.display = 'block';
                this.textContent = "▲";
                /* If input already has a value, select that option from DDL */
                var val = input.value;
                for (var i = 0; i < options.length; i++) {
                    if (options[i].text === val) {
                        select.selectedIndex = i;
                        break;
                    }
                }
            } else hide_select();
        }

        /* when user selects an option from DDL, write it to text field */
        select.addEventListener('change', fill_input);

        function fill_input() {
            input.value = options[this.selectedIndex].value;
            hide_select();
        }

        /* when user wants to type in text field, hide DDL */
        input = document.querySelector('input');
        input.addEventListener('focus', hide_select);

        function hide_select() {
            datalist.style.display = '';
            button.textContent = "▼";
        }
    </script>

</body>
</html>

en hier de 2e code:

Code:
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        <input type="text" value="" id="imagename" />
        <input type="button" id="btn" value="GO" />
    </form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'personeel/' + val +'.jpg',
                img = document.createElement('img');
            img.src = src;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>
 
Heeft iemand een tip?
Welke variabele moet ik gebruiken uit het datalistsysteempje om verder mee te werken en zoals hierboven beschreven een file te gaan zoeken en tonen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan