时间戳

首页 > 解决方案 > 语义 UI：获取当前下拉搜索输入文本

search - 语义 UI：获取当前下拉搜索输入文本

问题描述

我正在尝试使用 Semantic UI 的下拉搜索组件过滤我将从 api 获得的一些结果。

问题是我不知道如何获取我在输入字段中输入的文本

我的下拉搜索：

<div class="ui fluid search selection dropdown" id="user-dropdown">
    <input id="user-dropdown-input" name="country" type="hidden">
    <i class="dropdown icon"></i>
    <div class="default text">Search...</div>
    <div class="menu" id="user-dropdown-menu">
        <div class="item" data-value="af">
            <span class="description">123</span>
            <span class="text">User123</span>
        </div>
        <div class="item" data-value="af">
            <span class="description">123</span>
            <span class="text">User123</span>
        </div>
        <div class="item" data-value="af">
            <span class="description">123</span>
            <span class="text">User123</span>
        </div>
    </div>
</div>

如何初始化下拉菜单：

$(document).ready(function () {
    $('.ui.dropdown').dropdown({
        clearable: true,
        fullTextSearch: true
    });
});

我尝试了什么：

$('#user-dropdown').on('keyup', function () {
    let input = $('#user-dropdown');

    console.log('Val: ' + input.dropdown().val());
    // also tried: $('#user-dropdown-input').val()
    //             $('#user-dropdown-input').html()
    //             $('#user-dropdown-input').text()
});

基本上我想要的是if I type "abc"进入print the value "abc"控制台，但是I don't know how to get that value.

标签： searchinputtextdropdownsemantic-ui

解决方案

对我有用的是搜索用于搜索的输入，如下所示：

<input class="search" autocomplete="off" tabindex="0">

我在这个输入中添加了一个类型

document.getElementsByClassName('search').type = 'text';

然后在 keyup 上按类获取值

   $('.search').keyup(function() {
        console.log($(this).val());
    });

推荐阅读