0
javascript에 문제가 있습니다. 나는 작동하는 카테고리 완성을 사용하려하지만 스크립트가로드 된 페이지를로드 할 때 문제가 발생합니다. 스크립트를로드하면 작동하지 않을 것입니다.자동 완성이로드되고 있지만 작동하지 않습니다.
내가 referh (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(!/*@[email protected]*/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>
자바 스크립트는 메인 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);
}
});
});
}
'autoFocus : true'를 추가했으며 IE에서는 작동하지 않지만 chrome, firefox 및 opera에서 작동하기 시작했습니다. –