อยากสอบถามเกี่ยวกับ jquery autocomplate ค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากสอบถามเกี่ยวกับ jquery autocomplate ค่ะ

อยากสอบถามเกี่ยวกับ jquery autocomplate ค่ะ

คือ หนูกำลังทำ autocomplate ค่ะ พอดีหนูทำมาแล้วมันได้แค่ ช่องเดียว 1 อันค่ะ แต่หนูอยากให้ว่า ถ้ากดบวกเพิ่ม ช่อง input มาแล้วให้ขึ้น autocomplate ด้วย หนูยังทำไม่ได้เลยค่ะ อยยากรบกวนพี่นิคช่วยหนูดูหน่อยค่ะ มารบกวนพี่อีกแล้วค่ะ

นี่คือโค้ดค่ะ มันยังไงกดบวกเพิ่มมา อันที่ 2 มันก้ไม่ยอม autocomplate ให้ค่ะ ไม่ทราบว่าทำไมยังไงค่ะ พอมีคำแนะนำไหมค่ะ

<link rel="stylesheet" href="css/jquery.auto-complete.css">
<div class="row">
	<div class="col-xs-12 col-sm-12 control-group" id="fields">
    	
        	<div class="form-group text-contact">
			<label class="col-xs-12 col-sm-12 control-label">Certificate :</label>
				<div class="col-xs-12 col-sm-12 controls">
                	<form action="#" class="pure-form" method="post" enctype="multipart/form-data">
					<!--<input id="hero-demo" autofocus type="text" name="" placeholder="Certificate">-->
                    <div class="entry input-group">
                        <input id="" autofocus class="form-control autocomplate" name="" type="text" placeholder="Certificate" />
                    	<span class="input-group-btn">
                            <button class="btn btn-success btn-add" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </span>
                    </div>
                    
                    </form>  
				</div>
			</div>
            <div class="col-xs-12 col-sm-12" align="center">
            	<input type="submit" name="" value="Save" id="btn-save"/>
            </div>
		    
    </div>
</div>
    <script src="js/jquery.auto-complete.js"></script>
    <script>
	
        $(function(){
			
			 $('.autocomplate').autoComplete
			 ({
                minChars: 1,
                source: function(term, suggest){
                    term = term.toLowerCase();
                    var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
                    var suggestions = [];
                    for (i=0;i<choices.length;i  )
                        if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
                    suggest(suggestions);
                }
            });
			
			
			$(document).on('click', '.btn-add', function(e)
    {
           
			
			
			e.preventDefault();

        var controlForm = $('.controls form:first'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus"></span>');
    }).on('click', '.btn-remove', function(e)
	
    {
		$(this).parents('.entry:first').remove();

		e.preventDefault();
		return false;
            
			
			
			});
	
			
        });
	
    </script>

รบกวนด้วยนะค่ะพี่นิค :(

Chickenkook 14-10-2016 14:51:16

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

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

ใช้ ่jquery autocomplete ตัวไหนอยู่

ถ้าเป็น jquery ui autocomplete ดูตัวอย่างโค้ดนี้เป็นแนวทาง

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div class="row">  
    <div class="col-xs-12 col-sm-12 control-group" id="fields">  
          
            <div class="form-group text-contact">  
            <label class="col-xs-12 col-sm-12 control-label">Certificate :</label>  
                <div class="col-xs-12 col-sm-12 controls">  
                    <form action="#" class="pure-form" method="post" enctype="multipart/form-data">  
                    <!--<input id="hero-demo" autofocus type="text" name="" placeholder="Certificate">-->  
                    <div class="entry input-group">  
                        <input id="" autofocus class="form-control autocomplate" name="" type="text" placeholder="Certificate" />  
                        <span class="input-group-btn">  
                            <button class="btn btn-success btn-add" type="button">  
                                <span class="glyphicon glyphicon-plus"></span>  
                            </button>  
                        </span>  
                    </div>  
                      
                    </form>    
                </div>  
            </div>  
            <div class="col-xs-12 col-sm-12" align="center">  
                <input type="submit" name="" value="Save" id="btn-save"/>  
            </div>  
              
    </div>  
</div>  
  
  
<script>  
      
        $(function(){  
              

  
            var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "Lisp",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];
            $( ".autocomplate" ).autocomplete({
              source: availableTags
            });  
              
              
            $(document).on('click', '.btn-add', function(e) { 
            e.preventDefault();  
  
        	var controlForm = $('.controls form:first'),  
            currentEntry = $(this).parents('.entry:first'),  
            newEntry = $(currentEntry.clone()).appendTo(controlForm);  
  
        	newEntry.find('input').val('')
            .autocomplete({
              source: availableTags
            });  
        	controlForm.find('.entry:not(:last) .btn-add')  
            .removeClass('btn-add').addClass('btn-remove')  
            .removeClass('btn-success').addClass('btn-danger')  
            .html('<span class="glyphicon glyphicon-minus"></span>');  
			
    		}).on('click', '.btn-remove', function(e) {  
				$(this).parents('.entry:first').remove();  
				e.preventDefault();  
				return false;  
			});  
      
              
        });  
      
    </script>
 
  </body>
</html>

ตัวอย่าง

ninenik 14-10-2016

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

ขอบคุณค่ะพี่นิค ช่วยได้เยอะเลย จริงๆหนูก็ใช้ Jquery UI ค่ะ

chickenkook 17-10-2016 10:01

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน