yuu-nkjm/garbage_checker.js

## garbage_checker.js
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
  <script src="js/jlinq.js" ></script>
  <script src="js/garbage-data-ja.js"></script>
  <title>Garbage Checker</title>
</head>
<body>
<div data-role="page" id="menuPage">
  <div data-role="header"><h1>Garbage Checker</h1></div>
  <div data-role="content">
    <div data-role="fieldcontain">
      <input type="search" data-clear-btn="true" id="search_query" value="" placeholder="検索"/>
    </div>
    <div data-role="fieldcontain">
      <select id="select_gyo"></select>
    </div>
    <ul id="garbage_items" data-role="listview"></ul>
    <div data-role="popup" id="popup_data" data-position-to="origin" data-arrow="true"
         data-theme="b" data-overlay-theme="b" data-corners="true" data-shadow="false"
         data-tolerance="10,200,30,200">
    </div>
  </div>
</div>
<script>
$(document).on("pageinit", "#menuPage", function () {
  showSelectMenu();
  showGyoList("あ");

  $("#select_gyo").on("change", function () {
    var gyo=$(this).val();
    showGyoList(gyo);
    $("#search_query").val("");
  });

  $("#search_query").on("keyup change", function () {
    var query=$(this).val();
    showSearchResult(query);
    if($(this).val()){
       $("#select_gyo option").attr('selected',false);
       $('#select_gyo option[value="search"]').attr('selected',true);
       $('#select_gyo').selectmenu('refresh');
    }
  });

  $(".garbage_item").on("click", function () {
    var item = $(this).text();
    var result = $(this).attr("result");
    var notice = $(this).attr("notice");

    var noticeMsg = $(this).attr("notice") !== "missing" ? "<li><strong>注意事項</strong>：　"+$(this).attr("notice")+"</li>" : "";

    var str=
    '<div data-role="content">'+
    '<ul>'+
    '<li><strong>品目</strong>：　' + item + '</li>'+
    '<li><strong>処理区分</strong>：　' + result +'</li>'+
    noticeMsg + '</ul></div>'
    str+='<a href="#" data-rel="back" class="ui-btn ui-corner-all">閉じる</a>';
    $('#popup_data').empty();
    $('#popup_data').append(str);
  });
});

function showSelectMenu(){
  var gyos  = jlinq.from(garbageItems).distinct("gyo");

  for(var i=0; i<gyos.length;i++){
    $('#select_gyo').append($('<option>').addClass("gyo").val(gyos[i]).text(gyos[i]+"行"));
  }
  $('#select_gyo').append($('<option>').addClass("gyo").val("search").text(""));
  $('#select_gyo').selectmenu('refresh');
}

function showSearchResult(query){
  var items  =
  jlinq.from(garbageItems)
       .contains("name", query)
       .select({
          name: "missing",
          result: "missing",
          notice: "missing"
      });
  showList(items);
}

function showGyoList(gyo){
  var items  =
  jlinq.from(garbageItems)
       .equals("gyo", gyo)
       .select({
          name: "missing",
          result: "missing",
          notice: "missing"
      });
  showList(items);
}

function showList(items){
  var str="";
  for(var i=0; i<items.length; i++){
      str+='<li>'+
           '<a data-rel="popup" class="garbage_item"  data-arrow="true"'+
           ' result="'+items[i]["result"]+'" '+
           ' notice="'+items[i]["notice"]+'" '+
           ' href="#popup_data">'
           +items[i]['name']+'</a></li>';
  }
  $("#garbage_items").html(str).listview("refresh");
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
	<script src="js/jlinq.js" ></script>
	<script src="js/garbage-data-ja.js"></script>
	<title>Garbage Checker</title>
	</head>
	<body>
	<div data-role="page" id="menuPage">
	<div data-role="header"><h1>Garbage Checker</h1></div>
	<div data-role="content">
	<div data-role="fieldcontain">
	<input type="search" data-clear-btn="true" id="search_query" value="" placeholder="検索"/>
	</div>
	<div data-role="fieldcontain">
	<select id="select_gyo"></select>
	</div>
	<ul id="garbage_items" data-role="listview"></ul>
	<div data-role="popup" id="popup_data" data-position-to="origin" data-arrow="true"
	data-theme="b" data-overlay-theme="b" data-corners="true" data-shadow="false"
	data-tolerance="10,200,30,200">
	</div>
	</div>
	</div>
	<script>
	$(document).on("pageinit", "#menuPage", function () {
	showSelectMenu();
	showGyoList("あ");

	$("#select_gyo").on("change", function () {
	var gyo=$(this).val();
	showGyoList(gyo);
	$("#search_query").val("");
	});

	$("#search_query").on("keyup change", function () {
	var query=$(this).val();
	showSearchResult(query);
	if($(this).val()){
	$("#select_gyo option").attr('selected',false);
	$('#select_gyo option[value="search"]').attr('selected',true);
	$('#select_gyo').selectmenu('refresh');
	}
	});

	$(".garbage_item").on("click", function () {
	var item = $(this).text();
	var result = $(this).attr("result");
	var notice = $(this).attr("notice");

	var noticeMsg = $(this).attr("notice") !== "missing" ? "<li><strong>注意事項</strong>：　"+$(this).attr("notice")+"</li>" : "";

	var str=
	'<div data-role="content">'+
	'<ul>'+
	'<li><strong>品目</strong>：　' + item + '</li>'+
	'<li><strong>処理区分</strong>：　' + result +'</li>'+
	noticeMsg + '</ul></div>'
	str+='<a href="#" data-rel="back" class="ui-btn ui-corner-all">閉じる</a>';
	$('#popup_data').empty();
	$('#popup_data').append(str);
	});
	});

	function showSelectMenu(){
	var gyos = jlinq.from(garbageItems).distinct("gyo");

	for(var i=0; i<gyos.length;i++){
	$('#select_gyo').append($('<option>').addClass("gyo").val(gyos[i]).text(gyos[i]+"行"));
	}
	$('#select_gyo').append($('<option>').addClass("gyo").val("search").text(""));
	$('#select_gyo').selectmenu('refresh');
	}

	function showSearchResult(query){
	var items =
	jlinq.from(garbageItems)
	.contains("name", query)
	.select({
	name: "missing",
	result: "missing",
	notice: "missing"
	});
	showList(items);
	}

	function showGyoList(gyo){
	var items =
	jlinq.from(garbageItems)
	.equals("gyo", gyo)
	.select({
	name: "missing",
	result: "missing",
	notice: "missing"
	});
	showList(items);
	}

	function showList(items){
	var str="";
	for(var i=0; i<items.length; i++){
	str+='<li>'+
	'<a data-rel="popup" class="garbage_item" data-arrow="true"'+
	' result="'+items[i]["result"]+'" '+
	' notice="'+items[i]["notice"]+'" '+
	' href="#popup_data">'
	+items[i]['name']+'</a></li>';
	}
	$("#garbage_items").html(str).listview("refresh");
	}
	</script>
	</body>
	</html>