自动完成正在加载但无法正常工作

时间:2014-04-07 02:29:55

标签: javascript php jquery html html5

我遇到了javascripts的问题。我试图使用类别完成哪个有效,但问题是当我加载页面时脚本被加载,当我尝试使用它时它不起作用。

当我引用(不是F5)但是当我回到那个页面并尝试搜索时,它就可以工作了。我可以知道我哪里出错吗?

在chorme inspector中,当我在页面加载时尝试自动完成时出现错误。

XMLHttpRequest无法加载https://www.visitrentals.com/passingdata.php?term=&term=lon。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://www.visitrentals.com”访问。

谢谢你的帮助。

文件和代码的结构是:

HTML:

    <html>
    <head>
     <!-- To make HTML5 elements work in IE -->

    <script>(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()</script>
<base href="https://www.visitrentals.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<meta name="description" content="<?php echo $meta_des;?>">
<meta name="keywords" content="<?php echo $meta_keywords;?>">
<meta name="author" content="">
<link rel="canonical" href="https://www.visitrentals.com"/>

<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui.min-1.8.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main-2014.js"></script>
<script src="js/ga.js"></script>

<link href="css/originalcss.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css?v=20032014" type="text/css" media="screen"/>

<!-- Favicons -->
<link rel="shortcut icon" href="images/utility/favicon.png" />
<link rel="shortcut icon" href="images/utility/favicon.ico" />

<!-- iOS7 touch icons-->
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="images/utility/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="images/utility/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="images/utility/apple-touch-icon-152x152.png" />

<!-- iOS6 touch icons-->
<link rel="apple-touch-icon-precomposed" type="image/png" href="images/utility/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="72x72" href="images/utility/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="114x114" href="images/utility/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="144x144" href="images/utility/apple-touch-icon-144x144-precomposed.png" />

<style>
    .tel { color: #fff; font-size: 14px; }
</style>
   </head>
    <body>
   <form class="homepage-hero-form form-horizontal" action="result.php" method="post" id="searchform">
                <!-- <div class="control-group"> -->
                <!-- <h1 class="searchboxheader">Serviced apartment accommodation</h1> -->
                <input required type="text" id="question1" name="destination" class="span5 homeQ" placeholder="Where do you want to go?">
                <input required type="hidden" id="cat" value="" name="cat">
                <!-- </div> -->
                <!-- <div class="control-group"> -->

                <input required type="text" id="arriveDate" name="CheckInDate" class="leftSelect homeSelect" value="Arrive" readonly="readonly" autocomplete='off'/>
                <input required type="text" id="departDate" name="CheckOutDate" class="rightSelect homeSelect" value="Depart" readonly="readonly" autocomplete='off'/>
                <!-- </div> -->
                <!-- <div class="control-group" id="selectRooms"> -->
                <!-- <div class="home_visitor leftSelect"> -->
                <select  id="adult_select" placeholder="Adults" class="" name='adultsRoom_0'>
                    <option value="1">Adult 1</option>
                    <option value="2" selected="selected">Adults 2</option>
                    <option value="3">Adults 3</option>
                    <option value="4">Adults 4</option>
                    <option value="5">Adults 5</option>
                </select>
                <!-- </div> -->
                <!-- <div class="home_visitor rightSelect"> -->
                <select  id="child_select" placeholder="Children" class="" name='childrenRoom_0'>
                    <option value="0">Children 0</option>
                    <option value="1">Children 1</option>
                    <option value="2">Children 2</option>
                    <option value="3">Children 3</option>
                    <option value="4">Children 4</option>
                </select>
                <!-- </div> -->
                <!-- </div> -->

                <!-- <div class="control-group"> -->
                <input type='submit' class="btn btn-large btn-block btn-primary" value="search"/>
                <!-- </div> -->

            </form>

   <script src="js/bootstrap.js"></script>
   <script src="js/social/link.js"></script>
   <script src="js/social/share.js"></script>
   <script src="js/jquery.validate.min.js"></script>
   <script src="js/validation/jquery.validate2.js"></script>

   </body>
   </html>

javascript在main-2014.js下:

    $.widget( "custom.catcomplete", $.ui.autocomplete, {    
_renderMenu: function( ul, items ) {

    var that = this,
    currentCategory = "";
    $.each( items, function( index, item ) {
        if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category'>"+ item.category +"</li>" );
            currentCategory = item.category;
        }
        that._renderItem( ul, item );
    });

}
    });

    if($( "#question1" ).length){
$(function() {
    $( "#question1" ).catcomplete({
        delay: 0,
        minLength: 3,
        max:10,
        //source: "http://www.visitrentals.com/passingdata.php?"+ $("#question1").val(),
                    source: "passingdata.php?term="+ $("#question1").val(),
        select: function(event, ui){
            $('#cat').val(ui.item.category);
        }
    });
});
    }

1 个答案:

答案 0 :(得分:0)

除非网站明确允许您,否则您无法制作跨域ajax请求。这就是'Access-Control-Allow-Origin'标题的用途,允许其他网站发出ajax请求(以及其他内容)。您可以在此处阅读有关此概念的更多信息http://en.m.wikipedia.org/wiki/Cross-origin_resource_sharing