Как создать выпадающий поиск? - PullRequest
Новая
       5

Как создать выпадающий поиск?

2 голосов
/ 11 марта 2020

У меня есть очень длинный список значений, которые я хотел бы выбрать в раскрывающемся меню с возможностью поиска элементов путем ввода значения в виде текста. Например, что-то похожее на окно поиска в www.google.com ... Как я могу сделать это с jQuery, JavaScript, HTML и bootstrap? Есть ли ярлык?

Достаточно ли добавить класс к следующему коду вида бритвы? 

@Html.DropDownListFor(m => m.MyProperty, fmDataContext.MySelectList, "Select...", new { @class = "form-control" })

Это дает только обычный выпадающий список, а не то, что я хочу.

Ответы [ 2 ]

3 голосов
/ 11 марта 2020

Одним из возможных решений этой задачи является простой код HTML с элементом datalist : 

<form>
  <label for="properties">Properties</label>
  <input name="properties" id="properties" list="properties-list">
</form>
<datalist id="properties-list">
  <option>Property 1</option>
  <option>Property 2</option>
  <option>Property 3</option>
</datalist>
1 голос
/ 12 марта 2020

Что касается ваших требований, у меня есть пример DEMO для вас, использующий плагин jQuery MagicSearch . Два списка (idList и nameList), которые я создал, - это id и name для каждого элемента, объединенного в одну строку, разделенную запятой. Когда у вас есть эта строка, вы можете извлечь необходимую информацию для вашего требования. Вы можете настроить пользовательский интерфейс плагина в соответствии с вашими потребностями. Этот плагин принимает объект JSON, как показано ниже, для его работы, и вы можете прочитать больше о функциях обратного вызова в документации.

Рабочая ДЕМО: https://jsfiddle.net/pomygbk8/

<html lang="en">
<head>
    <title>Search for keywords</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/examples/css/normalize.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/examples/css/style.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/src/sass/jquery.magicsearch.scss" rel="stylesheet">
</head>

<body class="theme2">
    <div id="container">
        <h2>Search for keywords</h2>
        <section>
            <input class="magicsearch" id="basic" placeholder="search keywords">
        </section>
        <br />
        <input id="btnSearch" type="button" value="Submit" class="btn btn-primary btn-sm" />
    </div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/magicsearch@1.0.4/src/js/jquery.magicsearch.js"></script>
<script>
var idList="";
var nameList = "";
$(function () {

var dataSource = "[{\"id\":1,\"name\":\"test\"}, 
{\"id\":2,\"name\":\"example\"},{\"id\":3,\"name\":\"image\"}, 
{\"id\":4,\"name\":\"election\"},{\"id\":5,\"name\":\"IPL\"}, 
{\"id\":6,\"name\":\"Fashion\"},{\"id\":7,\"name\":\"Movies\"}, 
{\"id\":8,\"name\":\"Pollution\"},{\"id\":9,\"name\":\"Modi\"}, 
{\"id\":10,\"name\":\"Rahul\"},{\"id\":11,\"name\":\"Cricket\"}, 
{\"id\":12,\"name\":\"Market\"},{\"id\":13,\"name\":\"TestKeyword\"}, 
{\"id\":14,\"name\":\"testkeyword1\"},{\"id\":15,\"name\":\"testkeyword2\"}, 
{\"id\":16,\"name\":\"testkeyword3\"}]";


    $('#basic').magicsearch({
        dataSource: dataSource,
        fields: ['name'],
        id: 'id',
        format: '%name%',
        hidden: true,
        multiple: true,
        focusShow: true,
        isClear: true,
        multiField: 'name',
        multiStyle: {
            space: 5,
            width: 200
        },
        success: function ($input, data) {
            idList = idList + data.id + ',';
            nameList = nameList + data.name + ',';
           // alert(data.id);
            return true;
        },
        afterDelete: function ($input, data) {
            idList = idList.replace(data.id + ',', "");
            nameList = nameList.replace(data.name + ',',"");
            //alert(data.id);
            return true;
        }
    });
});
</script>
</body>
</html>
...