javascript - jquery - change image according to text input -

i have mysql table name of team in 1 column (club_name) , id on (club_id). every team has logo named respective id .png.

then have text input user can write name of team. there jquery function shows possible team names found in database according user typing can autocomplete. once user selects 1 of options focus moves out of text input. @ point, image change logo corresponding team. when text input empty or name not match team in database image should 0.png

how can achieve this? code far below:

edit:

i have 3 problems right now:

1. the method suggested store club id in json object returning first row of table.

the method below (although returns 1 row of table work, image changes appropriate 1 - ran little test replacing 'thisclub' name of club):

<script> var clublist = [  <?php $search_clubs = " select club_id, club_name clubs order club_id desc"; $result_clubs = mysql_query($search_clubs); echo json_encode(mysql_fetch_assoc($result_clubs)); //only returns 1 row ?> ]; </script> 

using method able have rows in json object 1 did not work when ran same test replacing 'thisclub' name of 1 club):

<script> var clublist = [  <?php $clubid = array(); $clubname = array();  $search_clubs = mysql_query(" select club_id, club_name clubs "); while($row = mysql_fetch_array($search_clubs)) { $clubid[] = $row["club_id"]; // or smth $row["video_title"] title $clubname[] = $row["club_name"]; } $res = array($clubid, $clubname); echo json_encode($res); ?> ]; </script> 

2. the second problem don't know replace 'thisclub' with. in other words, how value returned function.
3. i using 2 vars - 1 store name of clubs only, original function, other 1 name of clubs , respective id, function makes image change. because don't know changes make in original function searches names in new var (which contains club_id too)

the full code below.

<img id="team-logo" src="logos/0.png"/>  <input type="text" class="club-name" name="home" autocomplete="off"/>  <script> var clubs = [      <?php     $search_clubs = " select club_name clubs ";     $result_clubs = mysql_query($search_clubs);     while($clubs = mysql_fetch_array($result_clubs)) {         $club_name = $clubs['club_name'];         echo '"'.$club_name.'",';     }     ?> ];  var clublist = [  <?php $search_clubs = " select club_id, club_name clubs order club_id desc"; $result_clubs = mysql_query($search_clubs); echo json_encode(mysql_fetch_assoc($result_clubs)); //only returns 1 row ?> ];  $(".club-name").autocomplete({     source: clubs,     autofocus: true,     minlength: 2,     delay: 0,     close: function(event, ui){         if (!event.keycode || event.keycode === 13){             $(this).parents('form').find('.club-name').filter(function (){                 return $(this).val() === '';             }).first().focus();             //         }          clubid = "";         $.each(clublist, function (i, elem) {             if (elem.club_name === thisclub) {                 clubid = elem.club_id;                 $("#team-logo").attr("src", clubid+".png");             }         });         if(clubid == "") {             // show default image             $("#team-logo").attr("src", "0.png");         }         //$("#team-logo").attr("src", clubs+".png");     } }); </script> 

i club_id original select do.

then on focus out can along lines of:

$("#team-logo").attr("src", club_id+".png"); 

and set image src new image.

edit:

to expand bit, storing results of sql query in json object using json_encode() allow use like:

<script>     var clublist = [      <?php     $search_clubs = " select club_id, club_name clubs ";     $result_clubs = mysql_query($search_clubs);     echo json_encode(mysql_fetch_array($result_clubs));     ?>     ]; </script>  // run following code inside focus.out section , set thisclub returned clubname  clubid = ""; $.each(clublist, function (i, elem) {     if (elem.club_name === thisclub) {         clubid = elem.club_id;         $("#team-logo").attr("src", clubid+".png");     } }); if(clubid == "") {     // show default image     $("#team-logo").attr("src", "0.png"); } 

second edit (complete working example):

i've tested following , believe includes you're looking for. problem seemed in formatting of php array when passed json encode. pay close attention html changes.

$sql = " select club_id, club_name clubs order club_id desc";  $result_clubs = mysql_query($sql); if (!$result_clubs) {     echo "could not run query ($sql) db: " . mysql_error();     exit; } $clubs = array(); while($row = mysql_fetch_assoc($result_clubs)){     $clubs[] = array('club_id' => $row['club_id'], 'club_name' => $row['club_name']); } ?>  <img id="team-logo" src="logos/0.png"/>  <input id="clubname" type="text" class="club-name" name="home" autocomplete="off"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  <script type="text/javascript"> var clubs = [      <?php     foreach($clubs $club) {         $club_name = $club['club_name'];         echo '"'.$club_name.'",';     }     ?> ];      var clublist =  <?php echo json_encode($clubs)?>;  //only returns 1 row  $(".club-name").autocomplete({     source: clubs,     autofocus: true,     minlength: 2,     delay: 0,     close: function(event, ui){         if (!event.keycode || event.keycode === 13){             $(this).parents('form').find('.club-name').filter(function (){                 return $(this).val() === '';             }).first().focus();             //         }         clubid = "";         for(var = 0; < clublist.length; i++) {             obj = clublist[i];             if(obj.club_name == $("#clubname").val()){                 clubid = obj.club_id;                 $("#team-logo").attr("src", clubid+".png");             }          }         if(clubid == "") {             // show default image             $("#team-logo").attr("src", "0.png");         }     } }); </script>