我有一个自动完成搜索框，用于从数据库中搜索名称。结果应该是搜索名称，如果id相等，则单击以打开一个模式发布来自php的数据。我的问题是，当弹出模式对话框时，页面将自动刷新。在提交帖子后打开模式表单时，如何阻止页面重新启动？为此寻求帮助。非常感谢！
请参考以下代码：
自动完成搜索框
<form class="search" id="searchForm" method="post">
<div class="search__inner">
<input type="text" style="text-transform:capitalize; font-size:120%" id="livesearch" class="search__text" placeholder="Search patient's name ..."/>
<i class="zmdi zmdi-search search__helper" data-sa-action="search-close"></i>
</div>
<input type="text" name="searchid" id="searchid" style="width:7%;" placeholder="searchid" value="">
</form>
JS编辑的
<script>
$(function () {
$("#livesearch").autocomplete({
source: "php/livesearch.php",
select: function( event, ui ) {
// this will append a div to the body, then load the stream ... if the stream contains
// your modal it will be appended to the body
let div = $('<div/>').appendTo('body');
div.load('dsearch_modal.php?id=' + ui.item.id, function(data) {
// now that is complete ... open the modal
let modal = $('.modal', div); // search for your modal in the div
modal.modal('show'); // open the modal (bootstrap)
});
}
});
});
</script>
模式
<!-- Search bar Modal -->
<?php include 'dsearch_modal.php'; ?>
<div id="searchModal" class="modal fade card new-contact" role="dialog">
<div class="modal-dialog modal-sm-10">
<div class="modal-content">
<div class="new-contact__header">
<a href="#" class="zmdi zmdi-camera new-contact__upload"></a>
<img src="demo/img/contacts/user_empty.png" class="new-contact__img" alt="">
</div>
<div align="center">
<h4 style="text-transform:capitalize;" id="pxname"><?php print $row['search_fname']; ?> <?php print $row['search_lname']; ?> </h4>
<p hidden id="pxnameid"><?php print $row['search_PatientID']; ?></p>
</div>
<div class="card-body modal-dialog modal-content">
<h6 style="text-transform:uppercase;">
<p>Last consultation visit</p>
</h6>
<br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Consultation date</label>
<input type="text" id="searchobgyneDate" class="form-control" value="<?php print $row['search_obgyneDate']; ?>" disabled>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Service</label>
<input type="text" id="searchpxservice" class="form-control" value="<?php print $row['search_service']; ?>" disabled>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label>Company</label>
<input type="text" class="form-control" id="searchcompanyname" disabled>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
<a href="#"class="btn btn-light form-control">Consultation</a>
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
<a href="#"class="btn btn-light form-control">Records</a>
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
<a href="#"class="btn btn-light form-control">LAB Results</a>
</div>
</div>
<div class="col-sm-3" align="center">
<div class="form-group">
<a href="#"class="btn btn-light form-control" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of search bar Modal -->
<?php $conn->close(); ?>
PHP
<?php
$myid = $_GET['id'];
$sql1 = ("SELECT tblParity.pxservice as search_service, tblPatients.Lname as search_lname, tblPatients.mi as search_mi, tblPatients.Fname as search_fname,
tblPatients.PatientID as search_PatientID, DATE_FORMAT(tblOBGyne.obgyneDate,'%m/%d/%Y') as search_obgyneDate,
tblParity.ParityID, tblOBGyne.OBGyneID, tblOBGyne.chiefcomplain as search_chiefcomplain, tblOBGyne.companyname as search_companyname
FROM tblPatients
INNER JOIN tblParity ON tblPatients.PatientID = tblParity.PatientID
INNER JOIN tblOBGyne ON tblParity.ParityID = tblOBGyne.ParityID
WHERE tblPatients.PatientID = '{$myid}' ORDER BY tblobgyne.obgyneDate DESC limit 1");
$result1 = mysqli_query($conn, $sql1);
$num_results = mysqli_num_rows($result1);
$row = mysqli_fetch_assoc($result1);
echo $row['search_PatientID']." - ". $row['search_lname'].", ". $row['search_fname'];
?>
答案 0 :(得分：0)
使用jQuery.load（）
<script>
$(function () {
$("#livesearch").autocomplete({
source: "php/livesearch.php",
select: function( event, ui ) {
event.preventDefault(); // no necessary
$("#livesearch").val(ui.item.value); // not necessary
$("#searchid").val(ui.item.id); // not necessary
// this will append a div to the body, then load the stream ... if the stream contains
// your modal it will be appended to the body
let div = $('<div />').appendTo('body');
div.load( 'http://yoururl/?id=' + ui.item.id, function( data) {
// debug point - to work the data has to start with
// <div id="searchModal" class="modal
console.log( data);
// now that is complete ... open the modal
let modal = $('.modal', div); // search for your modal in the div
modal.modal( 'show'); // open the modal (bootstrap)
// debug point
console.log( modal); // should reflect div#searchModal.modal.fade.card.new-contact
});
// not this:
// $("#searchModal").modal(document.getElementById("searchForm").submit());
}
});
});
</script>