通过 javascript 加载时，自动完成功能不起作用答案

【问题标题】：Autocomplete don't work when it get loaded via javascript通过 javascript 加载时，自动完成功能不起作用
【发布时间】：2014-04-30 20:25:08
【问题描述】：

我在home.php 中有一个上传文件表单。当文件成功上传时，home.php 会加载upload.php，在那里我有一个表单，用户可以在其中写入有关 mp3 文件的信息、艺术家姓名等信息。我想通过 jQuery 实现自动完成脚本。但是当它通过javascript代码加载时自动完成不起作用，但是当我访问页面upload.php时它起作用。可能是什么问题？

Home.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-6">
    <script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>

<body style="margin-top:-60px;">
    <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
        <div>
            <input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
            <input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
        </div>
    </form>
    <div style="padding:0px 10px 0px 10px;">
        <div id="upload_response"></div>
    </div>
</body>

</html>

上传.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-6">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script>
        $(function () {
            var availableTags = ["html",  "php"];
            $("#artistInput").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>

<body>
    <div class="ui-widget">
        <form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
            <input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
            <input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
            <input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
        </form>
    </div>
</body>
</html>

Script.js

function uploadFinish(e) { // upload successfully finished
    var oUploadResponse = document.getElementById('upload_response');
    oUploadResponse.innerHTML = e.target.responseText;
    oUploadResponse.style.display = 'block';
    $("#upload").animate({
        height: '765px'
    }, 350);
    $('#errormessage').slideUp('fast');
}

【问题讨论】：

"当它通过 javascript 代码加载时" 它是如何加载的？在 home.php 中插入 $.load()?
var oUploadResponse = document.getElementById('upload_response'); oUploadResponse.innerHTML = e.target.responseText; 此代码通过javascript @Bigood 显示它在home.php 上的显示方式
你的代码在哪里加载了 script.js？
script.js 总是在home.php 上加载，但它会在文件上传完成时加载upload.php。 @Nemothefish

标签： javascript php jquery autocomplete

【解决方案1】：

您在 DOM 元素准备好之前执行脚本。

你可以做几个不同的事情来解决它，例如：

在页面底部加载您的脚本
将脚本移动到文档就绪事件中，以便 DOM 元素可用 $(document).ready(function() { -your script here- });

【讨论】：

很好的解决方案。我试着按照你的建议去做，但我没有工作，但我使用了$(document).ready(function() { -your script here- });并将它添加到uploadFinish(e)function。
您检查过浏览器的 JavaScript 控制台吗？你一定做错了什么。 $(document).ready(function() {}) 是“每个人都使用的通用解决方案”。大括号内的代码在页面完成加载后执行，它是跨浏览器：api.jquery.com/ready 控制台可以告诉你你做错了什么：错字，缺少 jquery 或其他什么......我不知道，但是这不应该失败
我的错。我在upload.php 中添加了代码，但我应该将它添加到home.php。谢谢它现在工作得很好。 @JotaBe

【解决方案2】：

你可以使用ajax来使用自动完成类型的插件..

<style>

label._tags {
    padding:5px 10px;
    margin:0px;
    border:solid thin #ccc;
    border-radius:3px;
    display: inline-block;
}

label._tags span {
    padding:2px 10px;
    margin: 0px 10px;
    color:#FFF;
    border-radius:700px;
    font-family:"calibri",verdana,serif;
    background-color:teal;
}

</style>
<script type="text/javascript">



var request;
var tag=new Array();
function getXMLObject(){
    if(window.XMLHttpRequest){
        return(new XMLHttpRequest);
    }else if(window.ActiveXObject){
        return(new ActiveXObject("Microsoft.XMLHttp"));
    }else{
        return (null);
    }
}


function getCategory(){


    var address="Ajax_testing";
     request=getXMLObject();
     var data=document.getElementById("multitag").value;

     var nwadd=address+"?text="+data;


     request.onreadystatechange=showResultsubject;
     request.open("GET",nwadd,true);
     request.send();
}


function close()
{

     var y=document.getElementById("p");



    var myNode = document.getElementById("p");
        while (myNode.firstChild) {
         myNode.removeChild(myNode.firstChild);
        }
     y.setAttribute("style","dispaly:none;");




}

function removetag(id)
{

     var y=document.getElementById("l");

     var z=document.getElementById(id.substr(3));

     tag.pop();

         y.removeChild(z);






}
  function gettag(id){


     tag.push(id);
     var f="";

     for (var i=0;i<tag.length;i++)
     {

         var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a  id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";

          f=f.concat(s);
     }

     document.getElementById("l").innerHTML=f;
    }






       <tr>
            <td>Keyword :

             </td>

            <td><input type="text" id="multitag"  name="multitag" onkeyup="getCategory()" onclick="close()">
            <div id="l">

            </div>



           <div id="p" style="display: none;z-index:11;" >

           </div> 
           </td> 
           </tr>

【讨论】：