0

Здравствуйте.

Необходимо реализрвать input и selector в одном поле. При загрузке страницы у меня подгружаются данные в select
Когда пользователь хочет выбрать какие-либо данные в поле но не находит их используя select tag он может добавить их вводом с клавиатуры. Можно ли как это реализовать с использованием Jquery-JavaScript или JSP-JSTL или Spring forms?

Получилось так:

select2_e.js

//инициализация плагина
(function ($) {
    jQuery.fn.select2_e = function () {
        $(this).each(function (n, element) {
            //тут превращаем select в input              
            var $element = $(element),
                choices = $element.find('option').map(function (n, e) {
                    var $e = $(e);
                    return {
                        id: $e.val(),
                        text: $e.text()
                    };
                }),
                width = $element.width(),
                $input = $('<input>', {
                    width: width
                });
            $element.hide().after($input);
            //превратили

            $input.select2({
                query: function (query) {
                    var data = {}, i;
                    data.results = [];

                    // подтставим то что искали

                    if (query.term !== "") {
                        data.results.push({
                            id: query.term,
                            text: query.term
                        });
                    }

                    // добавим остальное

                    for (i = 0; i < choices.length; i++) {
                        if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
                    }

                    query.callback(data);
                }
            }).on('change', function () {
                var value = $input.val();
                $element.empty();
                $element.append($('<option>').val(value))
                $element.val(value).trigger('change');
            });;
            return $element;
        });
        return this;
    }
})(jQuery);

Мой html файл:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<link rel="stylesheet" type="text/css" href="test.css"/>

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="select2_e.js"></script>

<script type="text/javascript">

$(document).ready(function()
         {
jQuery(function ($) {
    console.log($('.testclass').select2_e().on('change', function () {
        alert(this.value)
    }));
});
         });

</script>

</head>

<body>

<select id='test' class="testclass">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>

</body>

</html>

И сss:

.testclass {
    width: 300px;
}

Все лежит в одной папке. Но почему-то не выподает dropbox с элементами? Я просто новичок с jQuery. Извините.

8
  • Но это же просто селекторы. Мне нужен селектор и инпут в одном лице. Я поэтому и расписывал все тут. Я нашел, то что походит на мой вопрос, это просто ищет данные посредством ввода с клавиатуры из самого селектора. Если их не находит пишет no matches found. Но и ничего не вставляет в поле. Мне нужно, если не нашел, вставил, что пользователь ввел. 28 июн 2013 в 10:13
  • вот здесь ivaynberg.github.io/select2/#events не то разве ? или в любом из этих плагинов поменяйте функцию поиска, чтобы добавлять к списку то что в инпуте.
    – zb'
    28 июн 2013 в 13:27
  • От части это работает, я с Jquery не сталкивался ранее. Поэтому мне трудно понять этот код. Если к примеру убрать селектор сверху и оставить только input и позволить выбирать или добавлять только одно значение.Что от туда нада отсечь? 28 июн 2013 в 14:07
  • я бы посоветовал использовать jQueryUI: jqueryui.com/autocomplete/#combobox
    – IVsevolod
    5 июл 2013 в 12:43

2 ответа 2

5

Я думаю вы не осилите это, в общем нужный вам функционал для select2 был описан здесь

я немножко подправил и получил вот такое:

(function ($) {
    //тут превращаем select в input    
    var id = "test",
        $id = $('#' + id),
        choices = $id.find('option').map(function (n, e) {
            var $e = $(e);
            return {
                id: $e.val(),
                text: $e.text()
            };
        }),
        width = $id.width(),
        realClass = $id.get(0).className,
        realId = $id.get(0).id,

        $input = $('<input>',{width: width});
    $id.after($input);
    $id.hide();
    $id.find('option').remove();
    //превратили

    $input.select2({
        query: function (query) {
            var data = {}, i;
            data.results = [];

            // подтставим то что искали

            if (query.term !== "") {
                data.results.push({
                    id: query.term,
                    text: query.term
                });
            }

            // добавим остальное

            for (i = 0; i < choices.length; i++) {
                if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
            }

            query.callback(data);
        }
    }).on('change',function()
          {   
              var value=$input.val();
              $id.empty();
              $id.append($('<option>').val(value))
              $id.val(value).trigger('change');             
          }
         );
})(jQuery);

демо

в виде плагина select2_e

8
  • Cпасибо большое милый человек... Скажите, я добавляю все это в html и создаю tets.css не работает. Как его скомпановать? 29 июн 2013 в 12:40
  • не очень понял проблему, плагин можно положить в select2_e.js, грузить после jquery и select2 насчет css не понял, просто подключайте css какие надо (ну и css от select2)
    – zb'
    29 июн 2013 в 17:54
  • Я отредактировал мой вопрос. Посмотрите пожалуйста, что не так. Я новичок в JQuery и я уже своими силами это все с jsp интегрую. Но это я уже сам! Мне вместо тест необходимо свои аттрибуты подставить. Спасибо Вам за помощь. 30 июн 2013 в 10:05
  • добавьте перед select2_e.js ссылку на select2 и его css: ivaynberg.github.com/select2/select2-master/select2.js ivaynberg.github.com/select2/select2-master/select2.css сразу после jquery
    – zb'
    30 июн 2013 в 10:13
  • Cпасибо тебе милый человек. Все работает, ести это не покажется наглостью, то не во всех же броузерах работать будет? 30 июн 2013 в 11:58
3

HTML5 datalist

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.