Hộp tổ hợp ngữ nghĩa ui

Tôi đang sử dụng khung ngữ nghĩa-ui cho dự án của mình. Tôi cần chức năng combobox vì vậy tôi đang cố gắng kết hợp đầu vào văn bản và menu thả xuống ngữ nghĩa-ui.Hộp tổ hợp ngữ nghĩa ui

yêu cầu của tôi là:
1) Chấp nhận giá trị mà không có trong danh sách thả xuống
2) Thực hiện xác nhận đối với nhập văn bản (ví dụ như không có khoảng trắng)
3) Chọn/Tìm kiếm chống lại thả xuống

Xem: http://plnkr.co/edit/d5IUrqfHyjLy0qcH4qYQ?p=preview

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.js"></script> 
<script src="script.js"></script> 
</head> 
<body> 
<h4 class="ui inverted black block header"><span>semantic ui</span></h4> 
<div class="ui grid"> 
<div class="eight wide centered column"> 
    <form class="ui form ui form segment"> 
    <h4 class="ui dividing header">Personal Information</h4> 

    <div class="field"> 
     <div class="ui icon input search dropdown"> 
     <input type="text" id="jheader" data-validate="header" placeholder="Enter header" ng-model="person.gender"> 
     <i class="dropdown icon link"></i> 
     <div class="menu"> 
      <div class="item">Clothing</div> 
      <div class="item">Home Goods</div> 
      <div class="item">Bedroom</div> 
      <div class="item">Status</div> 
      <div class="item">Cancellations</div> 
     </div> 
     </div> 
    </div> 
    </form> 
</div> 
</div> 
<script> 
$(document).ready(function() { 
    $('.ui.dropdown').dropdown({ 
    onChange: function(value, text, $selectedItem) { 
     $("#jheader").val(text).trigger('input'); 
    } 
    }); 
    console.log("ready!"); 
}); 
</script> 
</body> 
</html>

Tôi cần tham gia tìm kiếm thả xuống khi tôi nhập giá trị vào dữ liệu nhập.

Nguồn

2015-01-29 Geemang

bạn đã tìm thấy giải pháp cho điều này chưa? –

Tôi có khá nhiều vấn đề tương tự trong khi quay lại.

Dưới đây là ví dụ về những gì tôi đã thực hiện với tôi để đáp ứng yêu cầu 1) và 3). http://plnkr.co/edit/4nC44UETWhPb8yVNNtKz?p=preview

Mã cũng được dán bên dưới, nhưng không có khối lượng lớn nhận xét. Về cơ bản cách thức hoạt động của nó là sử dụng lớp hộp thả xuống lựa chọn tìm kiếm sẵn có của ngữ nghĩa, tức là "tìm kiếm" và sử dụng làm mờ để đặt trường văn bản ẩn mà bạn gửi.

Lý do tại sao bạn cần đặt trường văn bản ẩn bằng mã là UI ngữ nghĩa tạo trường văn bản thứ hai, với lớp "tìm kiếm" mà người dùng sẽ thấy và nhập dữ liệu vào, nhưng không thực sự được gửi.

Ngoài ra còn có mã bổ sung khác để xử lý các sự cố khác, hãy tham khảo nhận xét trong liên kết plunker ở trên. Để đối phó với một trong số chúng, tôi phải loại bỏ lớp "đang hoạt động" được tạo tự động khỏi các tùy chọn div thả xuống, dẫn đến hiệu ứng không bolding cho mục thả xuống đã chọn.

HTML

<div class="customDropdownSearchTextInput ui search selection dropdown"> 
    <input type="hidden" name="gender"> 
    <div class="default text">Gender</div> 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <div class="item" data-value="Male">Male</div> 
     <div class="item" data-value="Female">Female</div> 
    </div> 
    </div>

Javascript

$('.ui.dropdown').dropdown(); 

$(".customDropdownSearchTextInput").each(function(){ 

    var defaultText = false; 

    if ($(this).find(".text").hasClass("default") && $(this).find(".text").text()) 
     defaultText = $(this).find(".text").text(); 

    var isSelectTag = false; 
    if ($(this).find("input:hidden").length < 1 || $(this).addBack().find("select").length > 0) 
     isSelectTag = true; 

    if (isSelectTag == false) 
    { 
    $(this).dropdown(
     { 
      forceSelection: false 
     }); 

     $(this).find(".search").on("focus", function(event){ 
      var aOpt = $(this).parent().find(".active"); 
      aOpt.removeClass("active"); 
     }); 

     var originalText = $(this).find(".search").text(); 
     $(this).find(".search").on("blur", function(event){ 
      var text = $(this).val(); 
      if (originalText != text) 
      { 
       if ($.trim(text)=="" && defaultText != false) 
       { 
        $(this).parent().find(".text").addClass("default").removeClass("filtered").text(defaultText); 
       } 
       $(this).parent().find("input:hidden").val(text); 
       originalText = text; 
      } 
     }); 
    } 
});

Nguồn

2015-04-17 08:59:57 Oniisaki

Thật không may, Semantic-UI không có tính năng này đến khi phiên bản mới nhất 1.12.x.

Hành vi của "ui search selection dropdown" rất khác với hành vi combox thực sự.

Nguồn

2015-05-28 14:10:24 cuixiping

Hộp tổ hợp ngữ nghĩa ui

Trả lời

Các vấn đề liên quan