อยากให้ search ขึ้นเป็น listview

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากให้ search ขึ้นเป็น listview

อยากให้ search ขึ้นเป็น listview
 
พอกดปุ่ม ค้นหารายการจอง มันจะไปเรียกใช้ฟังชั่น search อะครับ 

function search(){
    
   $.getJSON('http://nonnexus.freevar.com/file/search.php',function(data){
 $.each(data, function(key,value){
   
     var iconname = "plus";
     if (value.status != 'ดำเนินการ') icon ="minus";
    
     $("#searchlist").append('<li>'+
                     '<a href="#" onclick="openRecord(''+ value.EqId  '' ,''+value.Eqname '','' value.Eqlogo '','' value.status '','' value.Datebegin '',);">'+
                         '<h2>'+value.Eqname '</h2>' 
                         '<p class="ui-li-desc" style="font-size:18px">'+value.Eqlogo  '</p>'+
                         '<p class="ui-li-desc" style="font-size:18px">'+value.Datebegin  '</p>'+
                       
                         '</a><a href="#" data-icon="'+ icon + '"></a></li>' );
                        
 }); 
       $('#mylist').listview().listview('refresh');
 });     
};
และนี่เป็น HTML
  <div data-role="page" id="search" data-theme="c" >
         
       
            
         <div data-role="header">
               <center><img src="img/logo.png" width="90px" height="90px"></center>
         <h1>รายการครุภัณฑ์ที่จอง</h1>  
         </div>
       <div role="main" class="ui-content">
           <!--สำหรับแสดงรายการ -->
           <ul id="searchlist" data-role="listview" data-inset="false" data-filter="true" data-filter-placeholder="พิมพ์คำคัดกรอง"></ul>
       
            <br /> <br /> <br />
                        
        <a data-role="button" href="#main" data-theme="f" data-icon="back">กลับ</a> 
                        
    

         </div>
       <div data-role="footer" data-theme="c" data-position="fixed" style="text-align:center;"> 
    Sport Science Kasetsart University Kamphaeng Saen Campus
       </div> 
    
    </div>

และนี่เป็นฐานข้อมูลที่จะดึงมาอะครับ 

และนี่เป็น php ที่ json ใช้เรียกอะครับ
<?php
$host="localhost"; // Host name
$username="947"; // Mysql username
$password="non"; // Mysql password
$db_name="947"; // Database name


// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("ไม่สามาถเชื่อนต่อเซิฟเวอร์ได้");
mysql_select_db("$db_name")or die("ไม่สามารถเลือกตารางได้");
mysql_query("SET NAMES UTF 8");
mysql_query("SET character_set_results=utf8");//ตั้งค่าการดึงข้อมูลออกมาให้เป็น utf8
mysql_query("SET character_set_client=utf8");//ตั้งค่าการส่งข้อมุลลงฐานข้อมูลออกมาให้เป็น utf8
mysql_query("SET character_set_connection=utf8");//ตั้งค่าการติดต่อฐานข้อมูลให้เป็น utf8
  
// username and password sent from form


 
$sql="SELECT Eqid,Eqname,Eqlogo,status_U.status FROM reservation  LEFT JOIN status ON reservation.status = status_U.status ";

$result=mysql_query($sql);
 
    $jsonData = array();
    while ($array = mysql_fetch_assoc($result)) {
    $jsonData[] = $array;
  }
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($jsonData); 

?>

ผมลองทำดูแล้ว มันไม่ขึ้น list ให้อะครับ



Nonnexus 180.183.86.xxx 21-05-2016 13:27:25

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

ไม่รู้ว่าทำแบบไหน ลองทำตามตัวอย่างตามคู่มือดู  

http://demos.jquerymobile.com/1.4.5/listview-autocomplete-remote/

หรือดูตามตัวอย่างเก่าตัวนี้ดู



โค้ด
 

<div data-role="page" id="page_home">

	<div data-role="header">
    	<a href="#left_panel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars</a>
		<h1>Home</h1>
        
	</div><!-- /header -->

	<div data-role="content">
<!--BEGIN ส่วนของเนื้อหาในเพจ     -->

<!--สำหรับแสดงรายการ -->  
        <form class="ui-filterable">
            <input id="autocomplete-input" data-type="search" placeholder="พิมพ์ชื่อจังหวัด...ทดสอบพิมพ์ บุรี">
        </form>
        <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>

<!--       แผนที่จะแสดงใน div id นี้-->
    </div><!-- /content -->
 
    
</div><!-- /page -->
<script type="text/javascript">
$( document ).on( "pagecreate", "#page_home", function() {

    $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.html( "" );
        if ( value && value.length > 0 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
            $.ajax({
                url: "https://www.ninenik.com/demo/ajax/get_province.php",
                dataType: "jsonp",
                crossDomain: true,
				jsonp: "callback",  
				jsonpCallback:"JSON_CALLBACK",   
                data: {
                    keyword: $input.val()
                }
            })
            .then( function ( response ) {
                $.each( response, function ( i, val ) {
					html += "<li><a href='#'>";
					html += "<img src='http://demos.jquerymobile.com/1.4.5/_assets/img/album-p.jpg'>";
					html +="<h2>"+val.province_name +"</h2>";
					html +="<p>เพิ่มเติม</p></a>";
					html +="</li>";
                });
                $ul.html( html );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");
            });
        }
    });


});
</script>


ส่วนไฟล์สร้าง json ไฟล์ ดูเนื้อหานี้เป็นแนวทาง
 

สร้างไฟล์ json จากฐานข้อมูล รองรับการใช้งาน jsonp callback 



 



ninenik 122.155.42.xxx 21-05-2016






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ