두 필드가 자동 완성되지 않습니다.

2 개의 텍스트 상자에 하나의 텍스트 상자가 선택되면 그 텍스트 상자에 값이 저장되는 자동 완성 텍스트 상자를 구현하려고합니다. 예를 통해 더 쉽게 설명 할 수 있어야한다고 생각합니다.두 필드가 자동 완성되지 않습니다.

나는 2 개의 텍스트 상자가 있으며 동일한 테이블/데이터베이스에서 가져온 자동 완성 기능이 있습니다. 예를 들어, 열 foo가 있고 foo와 foo2 및 bar와 bar2가 포함 된 열 막대가 들어 있습니다. 따라서이 텍스트 상자에는 foo 열의 모든 것이 있고 다른 열의 열 바는 무엇이든 가지고 있습니다. textbox1에서 foo를 선택하면 textbox2에 bar가 생깁니다. textbox2에서 bar2를 선택하면 textbox1에 foo2가 표시됩니다.

내가 만든 의미, 나는 다음과 같은 자바 스크립트를

<script> 
$('#school_id').autocomplete({ 
source: function(request, response) { 
    $.ajax({ 
     url : 'ajaxi.php', 
     dataType: "json", 
     method: 'post', 
     data: { 
      name_startsWith: request.term, 
      type: 'school_table', 
      row_num : 1 
     }, 
     success: function(data) { 
      response($.map(data, function(item) { 
       var code = item.split("|"); 
       return { 
        label: code[0], 
        value: code[0], 
        data : item 
       } 
      })); 
     } 
    }); 
}, 
autoFocus: true,    
minLength: 0, 
select: function(event, ui) { 
    var names = ui.item.data.split("|");       
    $('#school_name').val(names[1]); 
}    
}); 
</script>

HTML

<body> 
<form id='students' method='post' name='students' action='test.php'> 
<input class="form-control" type='text' id='school_id' name='school_id'/> 
<input class="form-control" type='text' id='school_name' name='school_name'/> 
</form> 
</body>

스크립트 소스

<link rel="stylesheet" type="text/css" href="css/main.css" /> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

과 ajaxi.php 파일이 희망

if($_POST['type'] == 'school_table'){ 
$row_num = $_POST['row_num']; 
$name = $_POST['name_startsWith']; 
$query = "SELECT school_id, school_name FROM school where school_id LIKE '".$name."%'"; 
$result = mysqli_query($con, $query); 
$data = array(); 
while ($row = mysqli_fetch_assoc($result)) { 
    $name = $row['school_id'].'|'.$row['school_name'].'|'.$row_num; 
    array_push($data, $name); 
} 
echo json_encode($data);

입력 할 때 아무 것도 발생하지 않습니다. 도움에 대한 사전 감사.

나는 이것을 here에서 얻었다. 나는 각각이 무엇을하는지 이해하려고 노력했으나 나는 여전히 그것을 작동시키지 못한다.

출처

2016-09-16 ThisIsABird

난 그냥 눈치보다 알이 자습서를 참조하십시오 그 school_id_1에서 javascript는 textboxes (school_id)에서 다르기 때문에 변경되었습니다. 아직도 작동하지 않아서 나는 그것들을 되돌려 놓았다. – ThisIsABird

1 단계 : 필요한 모든 스크립트를 HTML 파일에로드 확인하시기 바랍니다 ...

2 단계 : 확인은 ...

예 그 자바 스크립트 오류를 취소하십시오 자바 스크립트 오류가 존재가있다

3 단계 : HTML 파일의 아래쪽에이 스크립트를 추가하세요 ...

<script> 
     $(document).ready(function(){ 
      $('#school_id').autocomplete({ 
       source: function(request, response) { 
        $.ajax({ 
         url : 'ajaxi.php', 
         dataType: "json", 
         method: 'post', 
         data: { 
          name_startsWith: request.term, 
          type: 'school_table', 
          row_num : 1 
         }, 
         success: function(data) { 
          response($.map(data, function(item) { 
           var code = item.split("|"); 
           return { 
            label: code[0], 
            value: code[0], 
            data : item 
           } 
          })); 
         } 
        }); 
       }, 
       autoFocus: true,    
       minLength: 0, 
       select: function(event, ui) { 
        var names = ui.item.data.split("|");       
        $('#school_name').val(names[1]); 
       }    
      }); 
     }); 

    </script>

4 단계 : 다음 확인 당신이 파일을 ajaxi.php하는 아약스 전화를 걸 않는 무언가를 입력합니다 ..

5 단계 : 예를 Ajax 호출의 응답을 확인하면 ...

내가 잘 붙여 넣은 스크립트 모든 것을 확인 ..

는 http://www.smarttutorials.net/jquery-autocomplete-multiple-fields-using-ajax-php-mysql-example/

출처

2016-09-18 07:14:19 muni

두 필드가 자동 완성되지 않습니다.

답변

관련 문제