jquery自动完成中的unicode字体问题答案

【问题标题】：unicode font problem in jquery autocompletejquery自动完成中的unicode字体问题
【发布时间】：2021-10-20 08:09:50
【问题描述】：

我正在使用 Jquery Autocomplete 插件从数据库中收集数据，但是当我收集任何英文数据时效果很好，但是当我尝试收集孟加拉语中的任何数据时，它看起来像这样???????

我是这个地方的新手，所以我不知道如何解决它。请帮帮我。

请在我的代码下方帮助我修复它。

<!Doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Autocomplete Textbox using jQuery AJAX in PHP MySql</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.maateen.me/kalpurush/font.css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    ul{
      margin-top: 0px;
      background: #fff;
      color: #000;
    }
    li{
      padding: 12px;
      cursor: pointer;
      color: black;
    }
    li:hover{
      background: #f0f0f0;
    }
</style>
  <body style="background-color: #ebebeb">
    <div class="container" style="margin-top: 50px;">
      <h2 class="text-center">Autocomplete Textbox using jQuery AJAX in PHP MySql</h2>
      <div class="row">
        <div class="col-md-3"></div>  
        <div class="col-md-6" style="margin-top:20px; margin-bottom:20px;">
          <form>
            <div class="form-group">
              <input type="text" class="form-control" name="cityname" id="city" placeholder="Search City"> 
              <div id="citylist"></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

<!--- Autocomplete textbox jquery ajax --->
<script type="text/javascript">
  $(document).ready(function(){
      $("#city").on("keyup", function(){
        var city = $(this).val();
        if (city !=="") {
          $.ajax({
            url:"mouja.php",
            type:"POST",
            cache:false,
            data:{city:city},
            success:function(data){
              $("#citylist").html(data);
              $("#citylist").fadeIn();
            }  
          });
        }else{
          $("#citylist").html("");  
          $("#citylist").fadeOut();
        }
      });

      // click one particular city name it's fill in textbox
      $(document).on("click","li", function(){
        $('#city').val($(this).text());
        $('#citylist').fadeOut("fast");
      });
  });
</script>

这是我的 php 代码

<?php
    // Database configuration 
    $dbHost     = "localhost"; 
    $dbUsername = "root"; 
    $dbPassword = ""; 
    $dbName     = "namjari"; 
     
    // Create database connection 
    $con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
     
    // Check connection 
    if ($con->connect_error) { 
        die("Connection failed: " . $con->connect_error); 
    }

// autocomplete textbox jquery ajax in PHP
    
    if (isset($_POST['city'])) {

        $output = "";
        $city = $_POST['city'];
        $query = "SELECT * FROM mouja WHERE mouja_name LIKE '%$city%'";
        $result = $con->query($query);

        $output = '<ul class="list-unstyled">';     

        if ($result->num_rows > 0) {
            while ($row = $result->fetch_array()) {
                $output .= '<li>'.ucwords($row['mouja_name']).'</li>';
            }
        }else{
              $output .= '<li> City not Found</li>';
        }
        
        $output .= '</ul>';
        echo $output;
    }

?>

【问题讨论】：

标签： javascript php html jquery css

【解决方案1】：

我认为您应该确保所有行和列都有一个排序规则（UTF-8 通用 ci）

【讨论】：