Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

Ajax

Por , em Javascript

Recommended Posts

William Bruno    1501

William Bruno
Postado

Montei um exemplo rápido aqui:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<link rel="stylesheet" href="http://www.gmarwaha.com/css/style.css" type="text/css" media="screen">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jquery.jcarousellite.js"></script>
<style>
body { background: #fff; }
</style>
</head>
<body>
<input type="text" id="search" placeholder="empresa1" />
<div class="carousel main">
    <a href="#" class="prev">PREV</a>
    <div class="jCarouselLite">
        <ul>
            <li id="empresa1"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="150" height="118"></li>
            <li id="empresa2"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="150" height="118"></li>
            <li id="empresa3"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="150" height="118"></li>
            <li id="empresa4"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="150" height="118"></li>
            <li id="empresa5"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="150" height="118"></li>
            <li id="empresa6"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="150" height="118"></li>
            <li id="empresa7"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="150" height="118"></li>
            <li id="empresa8"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="150" height="118"></li>
            <li id="empresa9"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/9.jpg" alt="" width="150" height="118"></li>
            <li id="empresa10"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/10.jpg" alt="" width="150" height="118"></li>
            <li id="empresa11"><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/11.jpg" alt="" width="150" height="118"></li>
        </ul>
    </div>
    <a href="#" class="next">NEXT</a>
    <div class="clear"></div>   
</div>  
<script>
$(function() {
    $("#search").on("blur", function(){
        var t = '#' + $(this).val();
        $(t).css('border', '4px solid red');
    });
    $(".jCarouselLite").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
</script>
</body>
</html>
copie todo esse código e execute.

 

Programei para "colocar a borda", assim que vc sair do input. Digite: empresa1 ou empresa3, e clique fora do input, ai vc vai ver a borda aparecer.

 

 

[]s!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Entendi. Troquei aqui para keyup e funcionou também!

 

Mas será que existe uma forma então de eu procurar a imagem pelo title e não pelo id?

 

Porque ficará muito esquisito o usuário digital 'Portal1' por exemplo?

 

Precisava ser alguma coisa bem familiar ao usuário.

 

O que eu colocaria no lugar do # ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
$("[title='" + $(this).val() + "']").css('border', '4px solid red');

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Sim. Dessa forma funcionou:

 

 

$(function() {

$("#search").on("keyup", function(){

var t = '#' + $("[title=" + $(this).val() + "]");

$("[title=" + $(this).val() + "]").css('border', '4px solid red');

});

 

 

E na imagem eu acrescento o atributo title om valor 'Portal 1' por exemplo.

 

Aproveitando:

 

Nessa parte:

 

var t = '#' + $("[title=" + $(this).val() + "]");

 

 

Não vejo você testando a existência do campo! É assim mesmo Bruno?

 

 

Outra coisa.

 

Se a imagem não estiver aparecendo no carroussel no momento da pesquisa, ela é marcada mas, como ela esta 'para dentro' do carrossel, ela não será vista.

 

Alguma solução para 'puchar ela'?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é só:

$(function() {
    $("#search").on("keyup", function(){
        $("[title='" + $(this).val() + "']").css('border', '4px solid red');
    });
delete a linha:
var t = '#' + $("[title='" + $(this).val() + "']");

não estamos usando ela.

 

 

testando oque ? pra que ? por que ?

 

Ai vc tem q ler a documentação do plugin de carousel, para saber como mover ele.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Entendi. Mas esta ocorrendo o seguinte erro agora:

 

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Vc precisa fazer o código para desmarcar.. não se espera que o jQuery faça nada que vc não o mande fazer.

 

vc ainda não mandou ele desmarcar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito