2
나는 작동하는 바이올린을 가지고 있지만 자동 완성 기능은 브라우저에 아무 것도 표시하지 않습니다. 바이올린은 여기에서 볼 수있다 : 내 자바 스크립트에서JQuery 자동 완성 결과가 브라우저에 표시되지 않는 이유는 무엇입니까?
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type ="text/javascript" src="myScripts.js"></script>
<script type ="text/javascript" src="jquery.csv-0.71.js"></script>
<script type ="text/javascript" src="csvToArray.v2.1.js"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Test</h1>
</div>
<div id="contentDiv" data-role="content">
<input type="text" id="food" placeholder="Type (First Name) Here" />
</div>
</div>
</body>
, 나는 파일에서 텍스트를 읽는하여 JSON 변수를 초기화하고 있습니다 : Working Fiddle되는 HTML에서
, 내가 테스트 목적으로 하나 개의 입력 요소가 있습니다. 내 json 변수에 대한 경고를 표시하여 초기화가 성공적인지 테스트했습니다. 내 자동 완성에서 해당 json 변수를 소스로 사용하려고합니다. 다음, 나는 문제를 좁히기 위해 JSON 변수의 초기화를 하드 코딩으로 내 자바 스크립트를 단순화 :
var jsonVersion =
[{"description":"mac and cheese", "servingSize":"1 cup", "calories":"500"},
{"description":"slice of pizza", "servingSize":"1 slice", "calories":"400"},
{"description":"oreo cookie", "servingSize":"1 cookie", "calories":"100"},
{"description":"salad", "servingSize":"1 cup", "calories":"50"},
{"description":"apple", "servingSize":"1 apple", "calories":"70"}];
$('#food').autocomplete({
source: jsonVersion,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
이 바이올린에 있지만 브라우저에서 작동 왜 어떤 생각? 브라우저 오류가 발생하지 않습니다. 텍스트 상자에 입력 할 때 아무 것도 표시되지 않습니다.
편집
아마도 내가 내 jsonVersion을 채우는하고있는 방법이다 - 나는 "경고"를 통해 jsonVersion를 인쇄 할 때, 그것은 잘 보이지만. 내가 여기서 뭘 잘못하고 있는지에 대한 조언은 인정 될 것이다. 다음은 전체 자바 스크립트 파일입니다. "데이터"배열의 배열 및 개체 배열을 만드는 개체를 만들려면 해당 배열을 통해 반복하고 있습니다. 그 때 나는 캐릭터 라인 화하여 JSON으로 객체의 배열을 변환 : 스크립트 안에 준비 핸들러를 dom으로하지 않습니다 같은
$(function ($) {
var jsonVersion;
var arrayOfObjects;
$.ajax({
type: "GET",
url: "test.js",
dataType: "text",
success: function(data) {
data = $.csv.toArrays(data);
arrayOfObjects = new Array();
for(var i=1; i<data.length; i++)//skipping over header
{
var foodObject = new Object();
foodObject.label = data[i][1];
foodObject.weight = data[i][2];
foodObject.servingSize = data[i][3];
foodObject.calories = data[i][4];
arrayOfObjects.push(foodObject);
}
jsonVersion = JSON.stringify(arrayOfObjects);
alert(jsonVersion);
}
});
$('#food').autocomplete({
source: jsonVersion,
select: function (event, ui) {
selectedObj = ui.item;
alert("selected object=" + selectedObj.value);
},
minLength: 1
});
})
가 $'에 방법을 포장은 (함수() {})는'- 바이올린은 – karthikr
당신의 코드가 다른 당신을위한 래퍼 추가 바이올린의 코드.'jsonVersion'의 객체는'description' 속성이나'label' 속성을 가지고 있습니까? autocomplete가 다른 수정없이 작동하게하려면'label' 및/또는'value' 속성이 필요합니다. –
'$ .ajax' 성공 함수 안에'autocomplete' 초기화 코드를 넣어야합니다. 요청이 완료되면 ** 위젯이 초기화되고'jsonVersion'이 비어 있습니다. –