Helpex - Trao đổi & giúp đỡ Đăng nhập
35

Tôi cần cho phép người dùng chọn một mục từ danh sách thả xuống, nhưng thay vào đó, tôi cũng cho phép họ nhập bất kỳ văn bản nào, ngay cả khi nó không khớp với một mục trong danh sách. Làm cách nào để đạt được điều này trên một trang web có HTML và Javascript?

Trường selectkhông cho phép người dùng nhập văn bản và trường inputvăn bản không hiển thị các lựa chọn thay thế ưa thích.

Tất cả các mục phải hiển thị nếu người dùng mở menu thả xuống, vì vậy, nó không thể là một tự động hoàn thành đơn giản mà chỉ hiển thị các mục phù hợp.

35 hữu ích 5 bình luận 105k xem chia sẻ
13

Đây là một kịch bản cho điều đó: Demo , Nguồn

Hoặc một liên kết khác hoạt động hơi khác: liên kết bị xóa (trang web không còn tồn tại)

13 hữu ích 3 bình luận chia sẻ
9

Tôi biết câu hỏi này đã được trả lời từ lâu, nhưng đây là dành cho những người khác có thể kết thúc ở đây và đang gặp khó khăn khi tìm kiếm thứ họ cần. Tôi đã gặp sự cố khi tìm một plugin hiện có hoạt động chính xác những gì tôi cần, vì vậy tôi đã viết plugin jQuery UI của riêng mình để hoàn thành nhiệm vụ này. Nó dựa trên ví dụ về combobox trên trang giao diện người dùng jQuery. Hy vọng rằng nó có thể giúp một ai đó.

https://github.com/tmooney3979/jquery.ui.combify

9 hữu ích 0 bình luận chia sẻ
3

Bạn có thể thử triển khai combobox có thể chỉnh sửa của tôi http://www.zoonman.com/projects/combobox/

3 hữu ích 1 bình luận chia sẻ
3

Tôi cũng đang tìm kiếm một câu trả lời, nhưng tất cả những gì tôi có thể tìm thấy đã lỗi thời.

Sự cố này đã được giải quyết kể từ HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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>

Nếu tôi không tìm thấy điều đó, tôi đã thực hiện theo cách tiếp cận này:

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

3 hữu ích 2 bình luận chia sẻ
1

Tôi nghĩ điều này sẽ đáp ứng yêu cầu của bạn:

https://github.com/RUPOJS/jsCombo

1 hữu ích 2 bình luận chia sẻ
1

Quên yếu tố danh sách dữ liệu đó là giải pháp tốt cho chức năng tự động hoàn thành, nhưng không phải cho tính năng combobox.

css:

.combobox {
    display: inline-block;
    position: relative;
}

.combobox select {
    display: none;
    position: absolute;
    overflow-y: auto;
}

html:

<div class="combobox">
    <input type="number" name="" value="" min="" max="" step=""/><br/>
    <select size="3">
        <option value="0"> 0</option>
        <option value="25"> 25</option>
        <option value="40"> 40</option>
    </select>
</div>

js (jQuery):

$('.combobox').each(function() {
    var
        $input = $(this).find('input'),
        $select = $(this).find('select');
    function hideSelect() {
        setTimeout(function() {
            if (!$select.is(':focus') && !$input.is(':focus')) {
                $select
                    .hide()
                    .css('z-index', 1);
            }
        }, 20);
    }
    $input
        .focusin(function() {
            if (!$select.is(':visible')) {
                $select
                    .outerWidth($input.outerWidth())
                    .show()
                    .css('z-index', 100);
            }
        })
        .focusout(hideSelect)
        .on('input', function() {
            $select.val('');
        });
    $select
        .change(function() {
            $input.val($select.val());
        })
        .focusout(hideSelect);
});

Điều này hoạt động bình thường ngay cả khi bạn sử dụng nhập văn bản thay vì số.

1 hữu ích 1 bình luận chia sẻ
0

thử làm điều này

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

vui lòng nhìn vào ví dụ fiddle sau đây

0 hữu ích 4 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript html combobox drop-down-menu , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading