Rechercher un mot spécifique - puis modifier l'image

Question

Disons que j'ai une image et un champ de texte. Chaque fois que je tape un mot spécifique dans le champ de texte ... Je veux que l'image change dynamiquement et ajax-acally (sans recharger la page web) à l'image que je l'ai définie ...

Comment cela est-il fait? Peut-être utiliser PHP/jQuery?

Answer 1

Ceci n'a rien à voir avec un langage côté serveur comme PHP.

En utilisant jQuery:

$(function() { 
    $('#textfield').change(function() { 
    switch($(this).val()) { 
     case 'some text': 
     $('#image').attr('src', 'some image source'); 
     break; 
     case 'some other text': 
     $('#image').attr('src', 'some other source'); 
     break; 
    } 
    }); 
}); 

Sinon, vous pouvez maintenir un hachage de texte => paires d'images-src. Au lieu d'une instruction switch, vous pouvez simplement voir si le texte que l'utilisateur a entré existe a une image src correspondante dans le hachage.

Answer 2

Voici une solution partielle pour vous commencer:

// bind to the keyup event of a text input 
$("#textinput").keyup(function() { 

    // when the event is triggered, send the captured text to the server 
    // as the 'whichImage' param 
    $.getJSON('image.php', { whichImage: $(this).val()}, function(json) { 

     if(!json.error) { 
      // modify the src (and whatever other attributes) to 
      // whatever the response contains 
      // another approach would be to send back an entire image tag and insert it 
      // somewhere in the document 
      $("#theImage").attr('src', json.src); 
      $("#theImage").attr('width', json.width); 
     } else { 
      alert(json.error); 
     } 
    }); 
}); 

PHP:

<?php 
if(isset($_GET['whichImage']) && !empty($_GET['whichImage'])) { 

    // supposing that function returns array('src' => 'foo.jpg', 'width' => '250px') etc.. 
    $imgArray = getMatchingImage($_GET['whichImage']); 
    if(!empty($imgArray)) { 
     echo json_encode($imgArray); 
    } else { 
     echo json_encode(array('error' => 'no match!')); 
    } 
    exit; 
} 
?> 

Ce serait une bonne idée d'ajouter un délai à envoyer le texte capturé au serveur, en fait la demande ne tirent pas constamment pendant que l'utilisateur tape. J'espère que c'était utile!