Selecionando Item no Carousel

[Carlos Rocha]

Pessoal, bom dia!

Tenho um JCarroussel no site abaixo:

http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/

O JCarroussel se encontra abaixo do banner na seção de Portais.

À cada imagem exibida no JCarroussel, esta associado um id="nome do portal".

Preciso criar uma função que pegue o valor de uma caixa de teste e vai comparando letra a letra que o usuário digitar se existe uma imagem com aquele id. Se existir, duas coisas deverão acontecer: 1) A imagem ganhará uma borda; 2) Se ela estiver escondida no JCarroussel, ela virá para o meio dele.

Alguém tem um tutorial de como fazer isso?

Eu até tentei. Mas ainda estou esbarrando na verificação se já existe ou não imagem coim aquele id.

Veja:

<label class="titulos">Portais</label>
<div id="container">
   <?php
     $pesquisaPortaisString ="SELECT id, nome, logo FROM portais ORDER BY nome";
     $pesquisaPortaisQuery=$conexao->Query($pesquisaPortaisString);
     if ($pesquisaPortaisQuery->num_rows==0)
     {
         echo "Ainda n&atilde;o h&aacute; portais cadastrados!";
     }
     else
     {
if ($pesquisaPortaisQuery->num_rows<=5)
{
$quantasFotos=$pesquisaPortaisQuery->num_rows;
}
else
{
$quantasFotos=5;
}
?>
<script type="text/javascript">
          $(window).load(function () {
              $("#carrossel").jCarouselLite({
                    btnPrev : '#prev1',
                    btnNext : '#next1',
                    auto    : 0,
                    speed   : 500,
                    visible : <?php echo $quantasFotos; ?>
              })
        })
        </script>  
<script>
        function pesquisa(campo)
        {
          valor='"#'+campo.value+'"';
          if ( $(valor).length )
          {  
            alert(valor);
            $(valor).css({ "border": '2px solid #ff0000'});
          }
        }
        </script>        
        <div id="result"></div>
        <div>
          Pesquisa: <form name="selecionaPostal" action="">
            <input type="text" name="pesquisaPortal" id="pesquisaPortal" onkeyup="pesquisa(this)" />
          </form>
        </div>
 
        <div><a href="#" class="prev" id="prev1"><img src="img/anterior.png" width="30px" /></a></div>  
        <div id="carrossel" style="float:left">
          <ul>
          <?php
           while(list($id, $nome, $nomeFoto)=$pesquisaPortaisQuery->fetch_row())
           {
?>
       <li><img  id="<?php echo $nome; ?>" src="<?php echo endereco_portais."/".$nomeFoto; ?>" alt="<?php echo $nome; ?>" title="<?php echo $nome; ?>" onclick="javascript:AbreImagemGrande('portaisMostrar.php?id=<?php echo $id; ?>','ImpNot','1100','700')" width="183px" /></li>
       <?php
           }
           ?>
          </ul>
       </div>
       <div><a href="#" class="next" id="next1"><img src="img/proximo.png" width="30px" /></a></div>
     <?php 
}
    ?>
</div>

Alguma orientação?

Grato a quem puder ajudar!

[Carlos Rocha]

Consegui assim:

<label class="titulos">Portais</label>
<div id="container">
   <?php
     $pesquisaPortaisString ="SELECT id, nome, logo FROM portais ORDER BY nome";
     $pesquisaPortaisQuery=$conexao->Query($pesquisaPortaisString);
     if ($pesquisaPortaisQuery->num_rows==0)
     {
         echo "Ainda n&atilde;o h&aacute; portais cadastrados!";
     }
     else
     {
if ($pesquisaPortaisQuery->num_rows<=5)
{
$quantasFotos=$pesquisaPortaisQuery->num_rows;
}
else
{
$quantasFotos=5;
}
?>
        <div>
          Pesquisa: <form name="selecionaPostal" action="">
            <input type="text" name="pesquisaPortal" id="pesquisaPortal"/>
          </form>
        </div>
 
        <div><a href="#" class="prev" id="prev1"><img src="img/anterior.png" width="30px" /></a></div>  
        <div id="carrossel" style="float:left">
          <ul>
          <?php
           while(list($id, $nome, $nomeFoto)=$pesquisaPortaisQuery->fetch_row())
           {
?>
       <li><img src="<?php echo endereco_portais."/".$nomeFoto; ?>" alt="<?php echo $nome; ?>" title="<?php echo $nome; ?>" onclick="javascript:AbreImagemGrande('portaisMostrar.php?id=<?php echo $id; ?>','ImpNot','1100','700')" width="183px" /></li>
       <?php
           }
           ?>
          </ul>
       </div>
       <div><a href="#" class="next" id="next1"><img src="img/proximo.png" width="30px" /></a></div>
     <script type="text/javascript">
        $("#pesquisaPortal").on("keyup", function(){
            //Pesquisa pot title 
            $("[title='" + $(this).val() + "']").css('border', '1px solid red');
        });
 
        $(window).load(function () {
            $("#carrossel").jCarouselLite({
                  btnPrev : '#prev1',
                  btnNext : '#next1',
                  auto    : 0,
                  speed   : 500,
                  visible : <?php echo $quantasFotos; ?>
            })
       })
       </script>  
     <?php 
}
    ?>
</div>

Mas acontece que este código esta ocorrendo uma falha ainda:

Achado uma imagem e estando ela marcada, se eu apagar alguma letra ou acrescentar mais alguma, o valor do title é mudado e então, aquela imagem já não é a procurada. Obviamente, o que se espera é que o Jquery desmarque. Mas não esta desmarcando não. Ou seja, se acrescentando (ou excluindo) alguma letra na caixa de pesquisa, se existir aquela combinação, então teremos duas imagens marcadas em vez de uma.

Como corrigir isso?