既存のjavascriptからオートコンプリート入力フィールドを作成する方法

Question

javascriptとHTMLコードが含まれていますが、完全ではありませんが、十分に理解できるほど十分です。現時点では次のように動作します： - 入力（id = zipcode）をクリックすると、郵便番号を入力するプロンプトボックスが表示されます。

私はこのプロンプトボックスを取り除いて、こうするだけでいいのですが： - 入力（id = zipcode）をクリックすると、上のテキストに "バブル"が表示されます入力フィールド... basicaly私はZIP入力フィールドに自動入力補完をしたいと思い...「あらかじめ入力される郵便番号、市/状態に入る」

Javascriptコード：

function prefillLocale(zip) 
{ 
    var doc, City, State, ZipCode; 

    ZipCode = document.getElementById("ZipCode"); 
    City = document.getElementById("City"); 
    State = document.getElementById("State"); 
    doc = ajax(doc); 

    // Load the result from the response page 
    // ** As far a I know firefox will only load a document on the SAME domain!!  
    if (doc) 
    { 
     var cmd = "../ajaxLocales.php?type=zip2cs&z=" + zip; 

     doc.open("GET", cmd, false); 
     doc.send(null); 

     var arraylist=doc.responseText.split("|"); 

     City.value = arraylist[0]; 
     State.value = arraylist[1]; 
      ZipCode.value = zip; 
     } 
     return true; 
    } 

     var bDoneOnce = new Array(); 

     function getZip1(ID 

) 
    { 
     if(bDoneOnce[ID] != undefined) return; 
     bDoneOnce[ID] = 1; 

     var zip=prompt("Enter a zip code and the city/state will be pre-filled.",""); 
     if (zip!=null && zip!="") 
     { 
      prefillLocale1(zip,ID); 
     } 
     document.getElementById("City"+ID).focus(); 
    } 

HTMLコード：

<div style="margin-left: 182px;"> 
<input type="text" onfocus="getZip1(50);" class="ac_input" value="Texas" id="State50" size="15" name="State"> 
<input type="text" onfocus="getZip1(50);" class="ac_input" value="75038" id="ZipCode50" size="5" maxlength="5" name="ZipCode"> 
</div> 

Answer 1

UPDATE

- Was going to update this with personally written code, but then a co-worker 
    filled me on the following link 

http://www.jensbits.com/2010/05/29/using-jquery-autocomplete-to-populate-another-autocomplete-asp-net-coldfusion-and-php-examples/

、別の素晴らしい例（ASPおよびColdusion例で!!!）

http://www.jensbits.com/2010/05/29/using-jquery-autocomplete-to-populate-another-autocomplete-asp-net-coldfusion-and-php-examples/

- Looks like it would probably be better you start there as my explanation 
    would probably go too deep into the depth of getting everything setup. 
- Give that sight a try, and if you have anymore questions, 
    feel free to hit me back up, though I'm quite sure if you go through his 
    walk-through, with a little more jQuery understanding, you'll be able to do 
    exactly what you want to do when you're done. 

あなたがthis awesomeの使用jQueryのアドイン

作ることができるようにjQueryUIを取得することを忘れないでください、私はあなたのコードが作る、特に以来、あなたの完全な意図をとして不明確ですほとんど意味がない。しかし、私はいくつかの部分を解釈し、jQueryで使用するための「一般的なプラクティス」を指摘することができました。以下は、jQuery固有の変更を使用したコードの最適な解釈です。最大のものは、ocument.getElementByIdが必要なくなり、jQueryがこれを単純な0​​に置き換えたためです。あなたはjQueryがjavascriptでほとんどすべてを作ることがわかります...もっと簡単です！

あなたの前のコード：（GIMMIEフィードバックと私はあなたが完全に問題を解決する手助けしようとします）

function prefillLocale(zip) { 
    var doc = ajax(doc), // ?!? 
     City = $("City"), 
     State = $("State"), 
     ZipCode = $("ZipCode"); 

    // Load the result from the response page 
    // ** As far a I know firefox will only load a document on the SAME domain!! 
    if (doc) { 
     var cmd = "../ajaxLocales.php?type=zip2cs&z=" + zip; 

     doc.open("GET", cmd, false); 
     doc.send(null); 

     var arraylist=doc.responseText.split("|"); 

     City.value = arraylist[0]; 
     State.value = arraylist[1]; 
     ZipCode.value = zip; 
     return true; 
    } 

    var bDoneOnce = new Array(); 

    function getZip1(ID) { 
     if(bDoneOnce[ID] != undefined) return; 
     bDoneOnce[ID] = 1; 

     var zip=prompt("Enter a zip code and the city/state will be pre-filled.",""); 
     if (zip!=null && zip!="") { 
      prefillLocale1(zip,ID); 
     } 
     $("#City"+ID).focus(); 
    } 
} 

Answer 2

入力にフォーカスイベントを追加したい場合は、そのイベントでプロンプトテキストを表示します。 jQueryのバージョン1.7.1を使用すると、行うことができます：

$(document).ready(function(){ 
    $(document).on('focusin','#ZipCode50', function(){ 
     // do your display here 
    }); 
    $(document).on('blur focusout','#ZipCode50', function(){ 
     // remove your display here 
    }); 
})