使用Ajax自动完成 [英] use ajax to autocomplete

问题描述

也许u能帮助一些AJAX的问题。

我有自动完成code - I型城市的名称和code自动完成它，我也得到了全市ID和应该把在一个隐藏的输入字段（名称='cityID '）...但它并没有做到这一点。

你能告诉我为什么吗？

HTML code：

 ＆LT; P＆GT;＆LT;标签＆gt;城市：LT; /标签＆gt;＆LT;输入类型=文本名称='的cityName价值='$的cityName'ID ='keyword_city 自动完成=关闭/＆GT;
    ＆LT;跨度ID ='ajax_response_city级='ajax_response风格=显示：无; ＆GT;＆LT; / SPAN＆GT;
    ＆LT;输入类型=隐藏名称='cityID'值='$ cityID'ID ='keyword_cityID'＆GT;
＆所述; / P＆GT;
 

服务器端（仅输出）：

 回声'＆LT;李＆GT;＆LT; A HREF = \的JavaScript：。无效（0）; \'数据-ID ='$行['cityID']' ＆GT;'。$最后。'＆LT; / A＆GT;＆LT; /李＆GT;';
 

脚本：

  $（＃ajax_response_city）。鼠标悬停（函数（）{
    $（本）.find（李一）。鼠标悬停（函数（）{
          $（本）.addClass（选择）;
    }）;
    $（本）.find（李一）。mouseout事件（函数（）{
          $（本）.removeClass（选择）;
    }）;
    $（本）.find（李一）。点击（函数（）{
          $（＃keyword_city）VAL（$（本）的.text（））;
          $（＃keyword_cityID）VAL（$（本）的.d​​ata（）同上）。
          $（＃ajax_response_city）淡出（慢）。
    }）;
}）;
 

全JS，你可以在这里找到：

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

解决方案

尝试使用一个div，而不是为ajax_response_city span标记。 该HTML被搞砸了，你的选择将不再工作。

我把一个例子： http://jsfiddle.net/me2loveit2/86T4f/

 ＆LT; D​​IV ID ='ajax_response_city级='ajax_response'＆GT;＆LT; / DIV＆GT;
 

我也开始使用正确的HTML（如在UL或OL认沽里的元素），以避免类似的问题。

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.

这篇关于使用Ajax自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！