使用ajax自动完成

Maybe u can help with with some ajax issue.

I have AUTO COMPLETE code - I type the city name and the code auto-completes it for me and also get the city ID and supposed to put in in a hidden input field (name='cityID')...but it doesn't do that.

Can you tell me why?

html code:

<p><label>city: </label><input type='text' name='cityName' value='$cityName'  id='keyword_city' autocomplete='off' />
    <span id='ajax_response_city' class='ajax_response' style='display:none;' ></span>
    <input type='hidden' name='cityID' value='$cityID' id='keyword_cityID'>
</p>

server side (only the output):

echo '<li><a href=\'javascript:void(0);\' data-id="'.$row['cityID'].'">'.$final.'</a></li>';

script:

$("#ajax_response_city").mouseover(function(){
    $(this).find("li a").mouseover(function () {
          $(this).addClass("selected");
    });
    $(this).find("li a").mouseout(function () {
          $(this).removeClass("selected");
    });
    $(this).find("li a").click(function () {
          $("#keyword_city").val($(this).text());
          $("#keyword_cityID").val($(this).data().id);
          $("#ajax_response_city").fadeOut("slow");
    });
});

The full JS you can find here:

http://www.dogger.co.il/js/ajax/autoComplate_city.js

Try using a div instead of a span tag for ajax_response_city. The html gets messed up and your selections won't work anymore.

I put together an example: http://jsfiddle.net/me2loveit2/86T4f/

<div id='ajax_response_city' class='ajax_response'></div>

I would also start using proper html (like put li elements in ul or ol) to avoid issues like that.