Есть ли способ показать ввод, когда строка введена в список данных, которого нет в списке данных? - PullRequest
Новая
       18

Есть ли способ показать ввод, когда строка введена в список данных, которого нет в списке данных?

0 голосов
/ 23 января 2020

Я никогда не использовал список данных и хочу показывать ввод типа файла только тогда, когда записанное им значение отсутствует в списке данных. Это мой код: 

<input list="customer" name="customer">
  <datalist id="customer">
    <option value="Customer 1">
    <option value="Customer 2">
    <option value="Customer 3">
  </datalist>
<input type="file">

Итак, я хочу, чтобы, если вы вводите значение, которого нет в опции, я хочу показать файл типа ввода. Можно ли это сделать с помощью CSS?

РЕДАКТИРОВАТЬ: я изменил код, потому что параметры, которые я хочу показать, находятся в массиве php. Вот мой код: 

<datalist id="customer">
  <?php
   foreach ($_SESSION[CUSTOMER_NAMES] as $row) {
     ?>
  <option value="<?php echo $row[0] ?>">
    <?php } ?>
    </datalist>
    <div class="inputBox">
       <input type="text" name="customer" id="customer" required="" list="customer"
       <?php 
         if (isset($_SESSION[CUSTOMER])) { 
           ?> 
           value="<?php echo $_SESSION[CUSTOMER]; ?>" 
       <?php } ?>>
       <label for="customer">Customer</label>                    
     </div>

1 Ответ

0 голосов
/ 23 января 2020

Поскольку в CSS только это невозможно, я бы использовал javascript и создал бы массив значений параметров; при input событии я бы проверил, существует ли значение в массиве.

Если получено значение, класс .found переключается при вводе списка, а затем ввод файла может быть скрыт с помощью селектора родного брата 

var dl = [...document.querySelectorAll('option')].map(
            (opt) => opt.value);

var cs = document.querySelector('[name="customer"]');

cs.addEventListener('input', function() {
   this.classList.toggle('found', dl.includes(this.value))   
});
[type="file"] { display: inline-block; }
.found ~ [type="file"] { display: none; }
<input list="customer" name="customer">
  <datalist id="customer">
    <option value="Customer 1">
    <option value="Customer 2">
    <option value="Customer 3">
  </datalist>
  
<input type="file">
...