Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,028

HOME > PHP > PHP Forum > event jQuery เมื่อเลือกข้อมูลจาก Dropdown list แล้วข้อมูลไม่เด้งขึ้นอัตโนมัติต้องมีการคลิกใหม่ที่จะขึ้น ????

event jQuery เมื่อเลือกข้อมูลจาก Dropdown list แล้วข้อมูลไม่เด้งขึ้นอัตโนมัติต้องมีการคลิกใหม่ที่จะขึ้น ????

เริ่มหัวข้อใหม่

Guest

ไม่ทราบว่าต้องใช้ event อะไร เพราะลองแล้วมันไม่ได้อ่ะค่ะ จาก code ข้างล่าง

Code

$(function(){   
        var availableTags = ['1','2','3','4','5'];   
        $("#level_tag").autocomplete({ 
            minLength: 0, 
            source: availableTags,  
            open:function(){   
                var valInput=$(this).val();
                if(valInput!=""){    
                    $(".ui-menu-item a").each(function(){  
                        var matcher = new RegExp("("+valInput+")", "ig" );  
                        var s=$(this).text();   
                        var newText=s.replace(matcher,"<b>$1</b>");  
                        $(this).html(newText);
                    });
					
	$("#h_level_tag").val(valInput);  // ปัญหาคือ ต้องใช้ event อะไรยังไงค่ะให้มันเมื่อเลือกข้อมูลจาก dropdown
                                      // แล้วค้าใส่ให้  ใน #h_level_tag อัตโนมัติ เพราะตอนนี้ใส่แล้วต้องเลือกใหม่ค่ามันถึงจะใส่ให้อ่ะค่ะ ??
                }			
           }  				
		 				
        }); 
          $("<button>&nbsp;</button>")   
            .attr("tabIndex", -1 )  
            .attr("title","คลิกเลือกข้อมูล")  
            .addClass("myselect")   
            .insertAfter("#level_tag")   
            .button({   
                icons: {   
                    primary:"ui-icon-triangle-1-s"  
                },   
                text: false 
            })   
            .removeClass( "ui-corner-all" )   
            .addClass( "ui-corner-right ui-button-icon" )   
            .click(function() {
                if ($("#level_tag").autocomplete("widget").is( ":visible" ) ) {   
                    $("#level_tag").autocomplete("close");  
                    return;   
                }   
                $("#level_tag").autocomplete("search","");   
                $("#level_tag").focus();  
            });   
    });

Tag : PHP, JavaScript, jQuery

Date : 2012-02-29 15:03:45

By : Littlecat

View : 2455

Reply : 6

No. 1

Mongkon.k

โพสกระทู้ ( 3,844 )
บทความ ( 0 )

เท่าที่ผมเคยลองใช้ jQuery ผมจะสร้างเป็น event function(javascript) ครอบ function ของ jQuery อีกที น่ะครับ

Date : 2012-02-29 16:19:01

By : mangkunzo

No. 2

Guest

ลองครอปแล้วมันไม่ได้อ่ะค่ะ ลองไม่ลองครอป ค่าออกมาไม่ต่างกันเลย ช่วยแนะนำด้วยว่าต้องแก้ตรงไหน

Date : 2012-03-01 13:04:57

By : LittleCat

No. 3

Likito

โพสกระทู้ ( 335 )
บทความ ( 0 )

ที่เห็นเป็น jQuery UI Autocomplete ครับ
ในส่วน plugin autocomplete อันนี้
มันมี event ในตัวมันเองอยู่ครับ
http://jqueryui.com/demos/autocomplete/

Code (JavaScript)

$(function(){   
    var availableTags = ['1','2','3','4','5'];   
    $("#level_tag").autocomplete({ 
        minLength: 0, 
        source: availableTags,  
        open:function(){   
            var valInput=$(this).val();
            if(valInput!=""){    
                $(".ui-menu-item a").each(function(){  
                    var matcher = new RegExp("("+valInput+")", "ig" );  
                    var s=$(this).text();   
                    var newText=s.replace(matcher,"<b>$1</b>");  
                    $(this).html(newText);
                });
					
                // ปัญหาคือ ต้องใช้ event อะไรยังไงค่ะให้มันเมื่อเลือกข้อมูลจาก dropdown
                // แล้วค้าใส่ให้  ใน #h_level_tag อัตโนมัติ เพราะตอนนี้ใส่แล้วต้องเลือกใหม่ค่ามันถึงจะใส่ให้อ่ะค่ะ ??
             }			
        }
        select: function( event, ui ) {
            $("#h_level_tag").val(valInput);
        }	 				
    }); 
          

    $("<button>&nbsp;</button>")   
        .attr("tabIndex", -1 )  
        .attr("title","คลิกเลือกข้อมูล")  
        .addClass("myselect")   
        .insertAfter("#level_tag")   
        .button({   
            icons: {   
                primary:"ui-icon-triangle-1-s"  
            },   
            text: false 
        })   
        .removeClass( "ui-corner-all" )   
        .addClass( "ui-corner-right ui-button-icon" )   
        .click(function() {
        if ($("#level_tag").autocomplete("widget").is( ":visible" ) ) {   
            $("#level_tag").autocomplete("close");  
            return;   
        }   
        $("#level_tag").autocomplete("search","");   
        $("#level_tag").focus();  
    });   
});

ลองดูครับ ไม่รู้จะได้แบบที่ต้องการรึเปล่า

ประวัติการแก้ไข
2012-03-01 14:05:28
2012-03-01 14:05:53

Date : 2012-03-01 14:03:39

By : Likito

No. 4

Guest

เคยลองแล้วค่ะมันไม่ได้ ที่งงคือ เราต้องเขียนอะไรเพิ่มหรือเป่า ถ้าเกิดว่า เลือกแล้วให้เอาค่าใส่ใน Textbox ธรรมดามันได้ค่ะ แต่ว่ามันไม่อัตโนมัติ เช่น พอเราเลือก1 ในช่อง Textbox ไม่แสดง 1 แต่พอเรากดเลือก listbox อีกครั้งหนึ่ง ค่าเลข 1 กับแสดงอ่ะค่ะ พอเราเลือก 2 ค่ากับไม่แสดง แต่พอเราจะกดเลือกใหม่อีกครั้ง ค่าเลข 2 ดันแสดง งงค่ะงง

Date : 2012-03-01 14:47:21

By : littelCat

No. 5

Likito

โพสกระทู้ ( 335 )
บทความ ( 0 )

พอเข้าใจแล้วครับ

Code (JavaScript)

    var availableTags = ['1','2','3','4','5'];   
    $("#level_tag").autocomplete({ 
        minLength: 0, 
        source: availableTags,  
        open:function(){   
            var valInput=$(this).val();
            if(valInput!=""){    
                $(".ui-menu-item a").each(function(){  
                    var matcher = new RegExp("("+valInput+")", "ig" );  
                    var s=$(this).text();   
                    var newText=s.replace(matcher,"<b>$1</b>");  
                    $(this).html(newText);
                });
					
                // ปัญหาคือ ต้องใช้ event อะไรยังไงค่ะให้มันเมื่อเลือกข้อมูลจาก dropdown
                // แล้วค้าใส่ให้  ใน #h_level_tag อัตโนมัติ เพราะตอนนี้ใส่แล้วต้องเลือกใหม่ค่ามันถึงจะใส่ให้อ่ะค่ะ ??
             }			
        }
        select: function( event, ui ) {
            $("#h_level_tag").val(valInput);
        }	 				
    });

ที่บอกว่า พอทำการเลือก ข้อมูลแล้ว ข้อมูลยังไม่แสดง ต้องทำการ เลือกซ้ำอีกที ข้อมูลถึงแสดง

ผมเข้าใจว่าเป็นเพราะ
Code (JavaScript)

var valInput=$(this).val();

น่าจะเป็นตรงนี้ครับ
$(this).val();
this นี้มันน่าจะหมายถึง $("#level_tag") ตัว textbox นี้
การที่เรา กดเลือกค่าครั้งแรก ตอนที่ยังไม่มีค่าอยู่ใน textbox เลย
เราใช้ $(this).val(); มันก็เลยมองว่าไม่มีค่า

แต่เมื่อเรา ทำการ กด select ค่าเดิมอีกรอบ ในตอนนี้มีค่าอยู่ใน textbox แล้ว
เลยทำการอ้างถึง $(this).val(); ค่ามันเลยได้ผลปกติครับ

ลองแก้เป็นแบบนี้ครับ

Code (JavaScript)

    var availableTags = ['1','2','3','4','5'];   
    $("#level_tag").autocomplete({ 
        minLength: 0, 
        source: availableTags,  
        select: function( event, ui ) {
            var valInput= this.value;
            if(valInput!=""){    
                $(".ui-menu-item a").each(function(){  
                    var matcher = new RegExp("("+valInput+")", "ig" );  
                    var s=$(this).text();   
                    var newText=s.replace(matcher,"<b>$1</b>");  
                    $(this).html(newText);
                });
            $("#h_level_tag").val(valInput);
        }	 				
    });

น่าจะใช้ event select แทน open นะครับ
select เป็น event ตอนที่เลือก ข้อมูลนั้นๆที่แสดงขึ้นมา

ส่วน open น่าจะหมายถึง ตอนที่ menu นั้นทำการเปิดขึ้นมาให้เลือก ข้อมูล

Date : 2012-03-01 15:51:38

By : Likito

No. 6

Guest

ยังเป็ฯเหมือนเดิมเลยค่ะ เฮ่อออ ทำไงดีหว่า แต่ขอบคุณพี่มากๆๆเลยน่ะค่ะ ตอบได้เคลียร์มาก

Date : 2012-03-03 08:58:28