提前输入重复的值 [英] duplicate value in typeahead

问题描述

我在页面中使用typeahead，它可以显示数据库中的值，但是该值将是重复的，例如，值是hotel并将hotelhotel保存在数据库中.有人知道解决方案吗?

I am using typeahead in my page, it can display value from database, but the value will be duplicate, for example the value is hotel and it will save hotelhotel in database. anyone know the solution?

index.php

index.php

<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
    name: 'typeahead',
    remote:'search.php?key=%QUERY',
    limit : 20
});
});
</script>

<td><input type="text" name="typeahead" class="typeahead tt-query, cal_amount typeahead" autocomplete="on" spellcheck="false" value="<?php echo $res['supplier'];?>"><input type="hidden" value="" name="typeahead" /></td>

search.php

search.php

<?php
$key=$_GET['key'];
$array = array();
include_once("connection.php");

$query=mysqli_query($con, "select * from supplier where cname LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query))
{
  $array[] = $row['cname'];

}
echo json_encode($array);
mysqli_close($con);
?>

推荐答案

我使用AJAX通过将Typeahead字段输入作为查询参数传递来执行PHP脚本，以处理SELECT以获得用于自动完成建议的数据. 有关更多详细信息，请单击下面的链接.

I used AJAX to execute PHP script by passing the Typeahead field input as the query parameter to process the SELECT to get data for the autocomplete suggestion. for more details you can follow the below link.

https://phppot. com/jquery/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>        
<script src="typeahead.js"></script>
<script>
    $(document).ready(function () {
        $('.typeahead').typeahead({
            source: function (query, result) {
                $.ajax({
                    url: "search.php",
                    data: 'query=' + query,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        result($.map(data, function (item) {
                            return item;
                        }));
                    }
                });
            }
        });
    });
</script>

<td><input type="text" name="typeahead" class="typeahead tt-query, cal_amount typeahead" autocomplete="on" spellcheck="false" value=""><input type="hidden" value="" name="typeahead" /></td>

search.php

search.php

<?php       
    $keyword = strval($_POST['query']);
    $search_param = "{$keyword}%";
    $conn =new mysqli('localhost', 'root', '' , 'test');

    $sql = $conn->prepare("SELECT * FROM supplier WHERE cname LIKE ?");
    $sql->bind_param("s",$search_param);            
    $sql->execute();
    $result = $sql->get_result();
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
        $countryResult[] = $row["cname"];
        }
        echo json_encode($countryResult);
    }
    $conn->close();
?>

解决方案2-不使用ajax.

// Create connection
$conn = new mysqli("localhost", "root", "", "test");
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
$query=mysqli_query($conn, "select * from supplier");
$data = '';
while($row=mysqli_fetch_assoc($query))
{
    // SELECT to get data for the autocomplete suggestion
    $data.= '"' .$row["cname"]. '",';
}

?>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>        
<script src="typeahead.js"></script>
<script>
$(document).ready(function(){

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var data = [<?php echo rtrim($data, ',');?>
];

$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  source: substringMatcher(data)
});

});
</script>
<input type="text" name="typeahead" class="typeahead tt-query, cal_amount typeahead" autocomplete="on" spellcheck="false" value=""><input type="hidden" value="" name="typeahead" />

这篇关于提前输入重复的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！