Semantic ui combobox

Utilizzo il framework semantic-ui per il mio progetto. Ho bisogno della funzionalità di combobox, quindi sto cercando di combinare un input di testo e il dropdown semantico-ui.Semantic ui combobox

miei requisiti sono:
1) accettare i valori che non sono in discesa
2) Eseguire la convalida contro l'immissione di testo (ad esempio, senza spazi)
3) Selezionare/Ricerca contro discesa

See: 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>

Devo impegnare la ricerca a discesa mentre digito i valori nell'input.

fonte

2015-01-29 Geemang

hai trovato una soluzione a questo? –

Ho avuto lo stesso problema un po 'di tempo fa.

Ecco un esempio di ciò che ho fatto con il mio per soddisfare i requisiti 1) e 3). http://plnkr.co/edit/4nC44UETWhPb8yVNNtKz?p=preview

Il codice viene inoltre incollato di seguito, ma senza l'enorme blocco di commenti. Fondamentalmente, come funziona, utilizza la classe di caselle a discesa di selezione della ricerca incorporata dell'interfaccia semantica, ovvero "selezione di ricerca", e utilizza su sfocatura per impostare il campo di testo nascosto, che invii.

Motivo per cui è necessario impostare il campo di testo nascosto utilizzando il codice è l'UI semantica generare un secondo campo di testo, con classe "ricerca" che gli utenti vedrebbero e digitano i dati in, ma non sono effettivamente inviati.

C'è anche l'altro codice aggiuntivo per gestire altri problemi, fare riferimento ai commenti nel link plunker sopra. Per gestire uno di questi, ho dovuto rimuovere la classe "attiva" generata automaticamente dalle opzioni di dropdown div, ottenendo un effetto non in grassetto per l'elemento a discesa selezionato.

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; 
      } 
     }); 
    } 
});

fonte

2015-04-17 08:59:57 Oniisaki

Purtroppo, semantico-UI non ha questa funzione fino a quando l'ultima versione 1.12.x.

Il comportamento di "ui search selection dropdown" è molto diverso da un vero comportamento di combox.

fonte

2015-05-28 14:10:24 cuixiping

Semantic ui combobox

risposta

Problemi correlati