Я использую этот пример для запуска запроса данных ajax из базы данных mysql, которая возвращает стол.

Это работает нормально, когда текст вводится вручную в эту форму ввода, например: введите описание изображения здесь

Но форма поиска имеет скрипт автозаполнения jquery, который поможет пользователю в этом. Когда значение выбирается из выпадающего списка значений автозаполнения, событие onchange не распознается, таблица не отображается.

Мой вопрос: как бы я поместил кнопку в конце формы поиска, чтобы изменить это на событие «onclick», а не на «onchange»? Препятствие, с которым я сталкиваюсь, заключается в том, что входные данные для «client_address» являются частью более крупной формы, и нажатие кнопки «Отправить» на любой кнопке заставляет страницу попытаться отправить всю форму.

Create_wt.php :

// autocomplete 
<script type="text/javascript">
    $(function() {
        $( "#clientsearch" ).autocomplete({
            source: 'backend_search_addressWT.php'
        });
    });
</script>
// retrieve data in table
<script>
    function showUser(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET","ajax_get_client_info.php?q="+str,true);
            xmlhttp.send();
        }
    }
</script>


<div class="form-group <?php echo (!empty($client_address_err)) ? 'has-error' : ''; ?>">
    <label>Address</label>
    <div class = "input-group">
        <input id="clientsearch" type="text" name="client_address" onchange="showUser(this.value)" class="input-group form-control" value="<?php echo $client_address; ?>" placeholder="Search by address..."  style="width: 500px;">
        <!---<span class="input-group-btn">
        <button class="btn btn-success" value="submit" id="ajaxbtn" type="submit">Get Client Info</button>
        </span> -->
    </div>
    <br><div id="txtHint"><b>Person info will be listed here...</b></div>
    <span class="help-block"><?php echo $client_address_err;?></span>
</div>

Ajax_get_client_info.php :

<?php
    require_once 'config.php';
    $q = trim($_GET['q']);
    $query = $mysqli->query("SELECT * FROM client WHERE client_address LIKE '%".$q."%'");


    //$data = array();

    //while ($row = $query->fetch_assoc()) {
        // $data[] = ($row);
    //}

    //echo json_encode($data);

    echo "<table>
    <tr>
    <th>client_id</th>
    <th>Client Name</th>
    <th>Phone Number</th>
    </tr>";
    while($row = mysqli_fetch_array($query)) {
        echo "<tr>";
        echo "<td>" . $row['client_id'] . "</td>";
        echo "<td>" . $row['client_name'] . "</td>";
        echo "<td>" . $row['client_phone'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";

?>

РЕДАКТИРОВАТЬ:

Create_wt :

<script type="text/javascript">
$(function() {
 $( "#clientsearch" ).autocomplete({
            select: function showUser(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","ajax_get_client_info.php?q="+str,true);
                xmlhttp.send();
            }
}
 }
 {
  source: 'backend_search_addressWT.php'
 });
});
</script>
0
warrenfitzhenry 30 Авг 2017 в 14:30

3 ответа

Лучший ответ

Согласно документации JQuery UI Autocomplete: http://api.jqueryui.com/autocomplete/#event-select

Событие select для ввода автозаполнения не принимает ввод пользователя в качестве аргумента, но имеет 2 других: событие , пользовательский интерфейс .

Итак, вы пытаетесь получить доступ к значению: ui.item.value , которое является значением выбранного элемента.

Так что это должно быть вашей проблемой.

CBroe имеет тот же ответ в комментариях.

....
function getHint(value) {
  if ((value !== "") && (typeof value !== 'undefined')) {
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if ((this.readyState == 4) && (this.status == 200)) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","ajax_get_client_info.php?q=" + value, true);
    xmlhttp.send();
    return true; // return true to accept the selection of the user
  } else {
    document.getElementById("txtHint").innerHTML = "";
    $(this).autocomplete( "close" ); // Close the autocomplete popup manual because by returning false negates the selection but it does not close the popup.
    return false; // return false to negate the selection of the user
  }
}
$( "#clientsearch" ).autocomplete({
    select: function showUser(event, ui) {
      return getHint(ui.item.value);
    },
    change: function showUser(event, ui) {
      return getHint(ui.item.value);
    },
    {
    source: 'http://www.example.com'
    }
 });
 ....

Обязательно прочитайте документацию, чтобы вы знали, как лечить этот случай с самого начала. Надеюсь это поможет.

0
Damian 30 Авг 2017 в 14:03

Измените onchange в поле ввода на onkeyup , что должно решить, onchange в основном используется для переключателей и флажков.

<input id="clientsearch" type="text" name="client_address" onkeyup="showUser(this.value)" class="input-group form-control" value="<?php echo $client_address; ?>" placeholder="Search by address..."  style="width: 500px;">
0
Rathan Naik 30 Авг 2017 в 11:35

Используйте кнопку типа ввода:

<input type="button" name="" id="">

И использовать его click событие. Тип ввода не будет отправлять форму.

0
Mayank Pandeyz 30 Авг 2017 в 11:38