dongzi3434 2018-06-05 13:55
浏览 43
已采纳

从数据库自动完成

I found this code snippet on the internet, and I want to use it for my search bar.

<!doctype html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

I want to connect this to my database somehow, but don't know how. I'm creating a blog, and it would be nice if it could search in blog posts... I don't mind to change anything in my blog (if necessary).

I hope you can help me!

  • 写回答

1条回答 默认 最新

  • 普通网友 2018-06-05 14:11
    关注

    Try with the following code. It might help you for your auto-complete feature.

    Paste the following code in index.php page

    <!DOCTYPE html>
      <html>
        <head>
          <title>Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="typeahead.js"></script>
        <style>
        .typeahead { border: 2px solid #FFF;border-radius: 4px;padding: 8px 12px;max-width: 300px;min-width: 290px;background: rgba(66, 52, 52, 0.5);color: #FFF;}
        .tt-menu { width:300px; }
        ul.typeahead{margin:0px;padding:10px 0px;}
        ul.typeahead.dropdown-menu li a {padding: 10px !important;  border-bottom:#CCC 1px solid;color:#FFF;}
        ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; }
        .bgcolor {max-width: 550px;min-width: 290px;max-height:340px;background:url("world-contries.jpg") no-repeat center center;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px;}
        .demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;}
        .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
            text-decoration: none;
            background-color: #1f3f41;
            outline: 0;
        }
        </style>    
    </head>
    <body>
        <div class="bgcolor">
            <label class="demo-label">Search Country:</label><br/> <input type="text" name="txtCountry" id="txtCountry" class="typeahead"/>
        </div>
    </body>
    <script>
        $(document).ready(function () {
            $('#txtCountry').typeahead({
                source: function (query, result) {
                    $.ajax({
                        url: "server.php",
                        data: 'query=' + query,            
                        dataType: "json",
                        type: "POST",
                        success: function (data) {
                            result($.map(data, function (item) {
                                return item;
                            }));
                        }
                    });
                }
            });
        });
    </script>
    </html>
    
    **Paste the following code in server.php page**
    
    <?php       
        $keyword = strval($_POST['query']);
        $search_param = "{$keyword}%";
        $conn =new mysqli('localhost', 'root', '' , 'blog_samples');
    
        $sql = $conn->prepare("SELECT * FROM tbl_country WHERE country_name 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["country_name"];
            }
            echo json_encode($countryResult);
        }
        $conn->close();
    ?>
    
    **Sample sql data**
    
    CREATE TABLE IF NOT EXISTS `tbl_country` (
    `id` int(11) NOT NULL,
      `country_name` varchar(255) NOT NULL
    )
    
    INSERT INTO `tbl_country` (`id`, `country_name`) VALUES
    (1, 'Afghanistan'),
    (2, 'Albania'),
    (3, 'Bahamas'),
    (4, 'Bahrain'),
    (5, 'Cambodia'),
    (6, 'Cameroon'),
    (7, 'Denmark'),
    (8, 'Djibouti'),
    (9, 'East Timor'),
    (10, 'Ecuador'),
    (11, 'Falkland Islands (Malvinas)'),
    (12, 'Faroe Islands'),
    (13, 'Gabon'),
    (14, 'Gambia'),
    (15, 'Haiti'),
    (16, 'Heard and Mc Donald Islands'),
    (17, 'Iceland'),
    (18, 'India'),
    (19, 'Jamaica'),
    (20, 'Japan'),
    (21, 'Kenya'),
    (22, 'Kiribati'),
    (23, 'Lao People''s Democratic Republic'),
    (24, 'Latvia'),
    (25, 'Macau'),
    (26, 'Macedonia'),
    (27, 'Namibia'),
    (28, 'Nauru'),
    (29, 'Oman'),
    (30, 'Pakistan'),
    (31, 'Palau'),
    (32, 'Qatar'),
    (33, 'Reunion'),
    (34, 'Romania'),
    (35, 'Saint Kitts and Nevis'),
    (36, 'Saint Lucia'),
    (37, 'Taiwan'),
    (38, 'Tajikistan'),    (39, 'Uganda'),
    (40, 'Ukraine'),
    (41, 'Vanuatu'),
    (42, 'Vatican City State'),
    (43, 'Wallis and Futuna Islands'),
    (44, 'Western Sahara'),
    (45, 'Yemen'),
    (46, 'Yugoslavia'),
    (47, 'Zaire'),
    (48, 'Zambia');
    
    ALTER TABLE `tbl_country_name`
     ADD PRIMARY KEY (`id`);
    
    ALTER TABLE `tbl_country_name`
    MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=49;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题