2009-03-06 8 views
0

jqueryを使用してオートコンプリートフォームを作成しようとしていますが、問題が発生しました。私は、データベース内にある場所の名前を入力すると、オートコンプリートの場所の完全な名前を表示するようにしていますが、クリックするとテキストボックスがいっぱいになりますgoogleマップで見つけることができる場所のアドレス。これを達成する最良の方法は何でしょうか?タイトルと異なる値のオートコンプリート

+0

どのjqueryオートコンプリートプラグインをお使いですか? –

答えて

2

ここでは、始めることができるいくつかのコードの非常に概略的なスケッチです。決してそれは完了しませんが、それはあなたに良いジャンプポイントを与える必要があります。希望があれば

$("#mySearchBox").change(function(){ 
/* 
    send a ajax request to receive a json object. 
    We use the callback function to populate the 
    a div tag "autocomplete" with the names 
*/ 
$.getJSON("http://myurl.com/myPage?search="+$(this).val() 
     function(data){ 
      $.each(data.items, function(i,item){ 
      /* 
       Assume item looks like this 

       item = {[{"address": 100 Main st", 
          "name": "Bob and Joe's Dinner"], 
          ... 
         } 
      */    
       /* Populate autocomplete with new spans 
        We use the text attribute to hold the address 
        You may want to look in to jquery data() feature. 
       */ 
       $("#autoComplete").append('<span text="'+ item.address + 
              '" class="searchResult">'+ item.name +'</span>'); 
      }); 
     }); 

});

$("#autoComplete .searchResults").click(function(){ 
    /* 
     Here we handle what the user clicks on. 
     Pull out the address from the attr and 
     put that back in the mySearchBox 
    */ 
    var address = $(this).attr("text"); 

    //Load the adress back int the textfield 
    $("#mySearchBox").val = address; 
}); 
0

"Person"オブジェクト全体をJSONオブジェクトを使ってjavascriptに渡す可能性があります。次に、オブジェクトの各部分をどこに移動するかを選択して選択できます。