3

次のコードでGoogleの提案を模倣したいと思います。つまり、次のことを意味します。

ステップ1：ユーザーが検索ボックスに入力すると、クエリ文字列がサーバーのphpファイルによって処理され、クエリ提案文字列が返されます（Ajaxオブジェクトを使用）。

ステップ2：ユーザーがクエリ候補をクリックすると、検索ボックスに入力されます（オートコンプリート）。

ステップ1は達成されますが、ステップ2は達成されません。問題は.click（）メソッドにあると思います（後で.live（）を使用しますが、それでも機能しません）。<li>私の意図は、動的に作成された要素にonclickイベントをバインドする.live（）または.click（）を使用することです。何か案が？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script src="jquery-1.4.2.js">
</script>

<style>
#search,#suggest,ul,li{margin: 0; padding:0; width: 200px;}
ul{ list-style-type: none;}
.border{border: solid red 1px; }
</style>

<p>My first language is:</p>
<input type="text" width="200px" id="search" onkeyup="main(this.value)" value="" />
<ul id="suggest"></ul>

<script type="text/javascript">
$(function main(str)
{  //binding any forthcoming li element click event to a function
$('li').live('click', function(){ $("#search").val(array[i]);});
  //setup Ajax object 
  var request=new XMLHttpRequest();
  request.open("GET","language.php?q="+str,true)
  //core function
  request.onreadystatechange=function()
    {    
  if ( request.readyState==4 && request.status==200)
       {  if (str=="") {$('li').remove(); $('ul').removeClass('border');return;}
      $('li').remove();
      reply=request.responseText.split(",");
         for (i=0;i<reply.length;i++)
         {
          //create HTML element of <li>
         $('#suggest').append($('<li>',{id: 'li'+i, html: reply[i]}));
         //style ul
         $('ul').addClass('border');
              }       
      }
    }
  request.send(); 
})
</script>

PHP：

<?php
$q=$_GET[q];

$a[]='english';
$a[]='chinese';
$a[]='japanese';
$a[]='eeeeee';

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
      if ($hint=="")
      {
        $hint=$a[$i];
      }
      else
      {
        $hint=$hint." , ".$a[$i];
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
  $response="no suggestion";
}
else
{
  $response=$hint;
}

//output the response
echo $response;
?>
4

5 に答える 5

3

jQueryオートコンプリートを探しています。

于 2010-06-06T14:40:44.863 に答える
2

どの行が問題であるかについては正しいです。#ID で検索するがありません。

$('li'+i).click(function(){ $("#search").html(array[i]);});

する必要があります

$('#li'+i).click(function(){ $("#search").html(array[i]);});

ただし、これを行うには、このハンドラーをアタッチするためにドキュメントの再クエリを必要としない、よりクリーンな方法があります。プラグインを使用するという提案に完全に同意します。

于 2010-06-06T15:05:36.403 に答える
2

また、ユーザーがアイドル状態になるまで待機することもできます。これにより、往復が多すぎるのを防ぐことができます。これは、次のように書くことを意味します。

$("input").keyUp(function(e) {
  clearTimeout(updater);
  updater = setTimeout(whenReady, 200);
}

function whenReady() {
  // update the search box here...
}
于 2010-06-06T15:13:27.247 に答える
1

私はあなたのコードを調べましたが、いくつかの問題があります。1) 動的に作成された要素にクリック イベントをバインドする場合は、.live('click', function(){}) イベント バインダーを使用する必要があります。この jQuery 関数は、後でコード内で動的に作成されるセレクターのクリック イベントをバインドするため、ドキュメント準備完了関数に live() イベントを記述すると、サーバーから送信される li 要素が自動的にクリック イベントにバインドされます。ドキュメントを読む。

サンプルコードはこちら

<script>
$(function() {
  $("#suggest li").live('click', function() {
    $("#search").val($(this).text()); // li inner html contains text that needs to put into search box
    alert($(this).text()); // or  alert(array[i]); in your code 
    //c what is the out put of above code. better if you change name of an array
  });
});
</script>

また、テキスト入力要素の値は、コード内の .html 関数の代わりに .val() 関数を使用してフェッチされます$("#search").html(array[i]);

よろしく アヤズ・アラヴィ

于 2010-06-06T15:10:30.687 に答える
-1

アプリケーションを正しく動作させる場合は、たとえばバックスペースの場合に、応答をキャッシュすることも検討する必要があります。

于 2010-06-06T14:42:28.440 に答える