Eu sugeriria que você não use as soluções que usam um <span>
invólucro porque não é um HTML válido, o que pode causar problemas no futuro. Acho que a solução preferida é realmente remover todas as opções que você deseja ocultar e restaurá-las conforme necessário. Usando jQuery, você só precisará dessas 3 funções:
A primeira função salvará o conteúdo original da seleção . Por segurança, convém chamar essa função ao carregar a página.
function setOriginalSelect ($select) {
if ($select.data("originalHTML") == undefined) {
$select.data("originalHTML", $select.html());
} // If it's already there, don't re-set it
}
A próxima função chama a função acima para garantir que o conteúdo original foi salvo e, em seguida, simplesmente remove as opções do DOM.
function removeOptions ($select, $options) {
setOriginalSelect($select);
$options.remove();
}
A última função pode ser usada sempre que você quiser "redefinir" para todas as opções originais.
function restoreOptions ($select) {
var ogHTML = $select.data("originalHTML");
if (ogHTML != undefined) {
$select.html(ogHTML);
}
}
Observe que todas essas funções esperam que você esteja passando elementos jQuery. Por exemplo:
// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed
Aqui está um exemplo prático : http://jsfiddle.net/9CYjy/23/