如何使自動填充輸入字段不存在javascript

Question

我已經包含JavaScript和HTML代碼，但沒有填滿，但希望足以讓您知道。目前它的工作方式如下： - 如果我點擊輸入（id =郵編），它會顯示提示框，輸入郵政編碼。

我想知道，如果我可以擺脫這個提示框，只是這樣做： - 如果我點擊輸入（id =郵編），它只是顯示一個「泡沫」輸入框「中輸入一個郵政編碼和城市/州將預填」 ...... basicaly我想提出的ZIP輸入字段autocompleter ...

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. 

不要忘記讓jQueryUI的，所以你可以利用this awesome的jQuery插件

我不清楚你的全意圖，尤其是因爲您的代碼很少有意義。但是，我能夠解釋某些部分，並指出了一些用於jQuery的「一般做法」。以下是對jQuery特定更改的最佳解釋，最大的解釋是，您不再需要ocument.getElementById，因爲jQuery已用簡單的$(insertElementIdOrClassNameOrCssSelectorHere)取代了此選項。你會發現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 
    }); 
})