Question

我已经包含了javascript和HTML代码，但并不完整，但希望足以让您了解。目前它的工作方式如下： - 如果我点击输入（id = zipcode），它会显示提示框，您可以在其中输入邮政编码。

我想知道，如果我可以摆脱这个提示框并且这样做： - 如果我点击输入（id = zipcode），它只显示一个“气泡”，输入字段上方有文字“输入邮政编码，城市/州将被预先填写”...基本我想制作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 code：

<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

更新

 - 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
    });
})

如何使用现有的javascript制作自动完成输入字段

2 个答案: