É simples de usar, porém você deve saber de duas coisas:
1º) Qualquer verificação que fizer com ele só use jquery, porque javascript não funciona nessa combo.
2º) o value dele é a mesma coisa do texto ou seja o que estiver no value aparecerá no texto, tem como mudar isso? eu confesso que não consegui se alguém conseguir pode comentar para poder ajudar mais programadores.Se você quiser um código e não uma descrição, use o recurso de campo oculto dependendo do problema irá resolver.
Para visualizar o exemplo:
http://supertutoriaiswebs.hol.es/comboboxeditavel/ComboboxEditavel/
Para dowload dos arquivos, você pode usar esse link
http://coffeescripter.com/code/editable-select/
e para usar em um script simplificado pode usar esse arquivo como index.
INDEX.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.editable-select.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.editable-select.pack.js"></script>
<script type="text/javascript" src="../common.js"></script>
<script type="text/javascript">
$(function() {
$('.editable-select').editableSelect(
{
bg_iframe: false,
onSelect: function(list_item) {
$('#results').html('List item text: '+ list_item.text() +'<br> \
Input value: '+ this.text.val());
}
}
);
var select = $('.editable-select:first');
var instances = select.editableSelectInstances();
instances[0].addOption('Germany, value added programmatically');
});
</script>
<style type="text/css">
.example .example-select {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #CCC;
}
.example p {
margin: 0;
padding: 0;
}
.last {
margin-bottom: 10px;
}
#comment-form {
width: 100%;
}
</style>
<title>Combobox Editavel - Coffeescripter.com</title>
</head>
<body>
<div id="container">
<h1> Exemplo de Combobox Editavel</h1>
<p> </p>
<form class="example">
<div class="example-select">
<label for="country">Estados</label>
<select name="country" id="country" class="editable-select">
<option></option>
<option>Bahia</option>
<option selected="selected">Minas Gerais</option>
<option>Espirito Santo</option>
<option>Pernambuco</option>
<option>Santa catarina</option>
</select>
</div>
<div class="example-select"></div>
<div id="results"></div>
</form>
</div>
</body>
</html>
Parabéns Roseni!!! Sempre salvando a vida dos programadores!!! Muito bom esse código. Quase não acha nada sobre esse combo editável e é bem util em aplicaçoes onde a lista de opções é grande... Obrigado!
ResponderExcluirmuito bom...
ResponderExcluir