it-swarm.com.ru

Выпадающее меню / текстовое поле в одном

Я работаю над созданием нового сайта, и мне нужно выпадающее меню, чтобы выбрать количество чего-либо на моем сайте. Но в то же время мне нужен этот выпадающий список, чтобы принять текст. Поэтому, если клиент хочет выбрать из выпадающего списка, он может, также, если клиент хочет ввести сумму с помощью текста, он также может. Как видите, я хочу сделать это двойственным.

Например: предположим, что есть раскрывающееся меню amount, и его элементами являются (1,2,3);

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

После описания моей проблемы и простого примера, который я вам представил, вот мой вопрос:

Существует ли HTML-код для создания выпадающего меню и текстового поля в виде двойного, не разделенного?

53
khalid jarrah

Опция 1

Включите скрипт из dhtmlgoodies и инициализируйте так:

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 
createEditableSelect(document.forms[0].myText);

Вариант 2

Вот пользовательское решение, которое сочетает в себе <select> элемент и <input> element, стилирует их и переключает туда и обратно через JavaScript

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>
36
Devang Rathod

Вы можете сделать это изначально с HTML5 <datalist> :

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
89
onaclov2000

Я нашел этот вопрос и обсуждение очень полезным и хотел показать решение, с которым я закончил. Он основан на ответе @DevangRathod, но я использовал jQuery и сделал несколько настроек, поэтому хотел показать полностью прокомментированный пример, чтобы помочь всем, кто работает над чем-то похожим. Первоначально я использовал элемент списка данных HTML5, но был недоволен этим решением, поскольку оно удаляет из выпадающего списка параметры, которые не соответствуют тексту, введенному в поле. В моем приложении я хотел, чтобы полный список был всегда доступен.

Полностью функциональная демонстрация здесь: https://jsfiddle.net/abru77mm/

HTML:

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS:

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS:

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

Любые комментарии по улучшению моей реализации приветствуются. Надеюсь, кто-то найдет это полезным.

5
Daniel Skarbek

Мне нравится ввод токена jQuery. На самом деле предпочитают пользовательский интерфейс, а не некоторые другие опции, упомянутые выше.

http://loopj.com/jquery-tokeninput/

Также см .: http://railscasts.com/episodes/258-token-fields для объяснения

1
Matthias

Вдохновленный js fiddle @ajdeguzman (сделал мой день), вот мой производный узел/React:

 <div style={{position:"relative",width:"200px",height:"25px",border:0,
              padding:0,margin:0}}>
    <select style={{position:"absolute",top:"0px",left:"0px",
                    width:"200px",height:"25px",lineHeight:"20px",
                    margin:0,padding:0}} onChange={this.onMenuSelect}>
            <option></option>
            <option value="starttime">Filter by Start Time</option>
            <option value="user"     >Filter by User</option>
            <option value="buildid"  >Filter by Build Id</option>
            <option value="invoker"  >Filter by Invoker</option>
    </select>
    <input name="displayValue" id="displayValue" 
           style={{position:"absolute",top:"2px",left:"3px",width:"180px",
                   height:"21px",border:"1px solid #A9A9A9"}}
           onfocus={this.select} type="text" onChange={this.onIdFilterChange}
           onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} 
           placeholder="Filter by Build ID"/>
 </div>

Выглядит так:

enter image description here

1

Я хотел бы добавить решение на основе автозаполнения JQuery, которое делает эту работу.

Шаг 1: сделать список фиксированной высотой и прокручиваемым

Получите код из https://jqueryui.com/autocomplete/ примера "Scrollable", задающего максимальную высоту для списка результатов, чтобы он действовал как поле выбора.

Шаг 2: Откройте список в фокусе:

Показать список автозаполнения jquery ui на событии focus

Шаг 3: Установите минимальные символы в 0, чтобы он открывался независимо от того, сколько символов на входе

Конечный результат:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Scrollable results</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "LISP",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
//      source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
      source: function (request, response) {
          response( availableTags);
      },
      minLength: 0
    }).focus(function(){
//        $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
        $(this).data("uiAutocomplete").search('');
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Проверьте jsfiddle здесь:

https://jsfiddle.net/bao7fhm3/1/

0
Alexandru Trandafir Catalin