如何使自动填充输入字段不存在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 
    }); 
})