Question

我编写的代码用于从mysql数据库中自动完成文本输入框。我目前正在减轻jQuery Mobile的设置，但是我在找到如何编写修改后的自动完成方面遇到了很多问题。我的原始html低于（大大简化）

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head> 
<script>
    $(function() {
    $( "#get_ingredient_1" ).autocomplete({source: 'search.php'});
});
</script>

<div class="ui-widget">
    <input id="get_ingredient_1" name="ingredient_type" style = "width:200px">
</div>
</html>

search.php如下所示。

<?php
//database configuration

include("db_connect.php");  

//get search term
$searchTerm = $_GET['term'];

//get matched data from skills table
$category_query = mysqli_query($dbconnection, "SELECT DISTINCT ingredient FROM ingredients WHERE ingredient LIKE '%".$searchTerm."%' ORDER BY ingredient ASC"); 
//while ($row = $query->fetch_assoc()) {
while($row = mysqli_fetch_assoc($category_query)){  
    $data[] = $row['ingredient'];
}

//return json data
echo json_encode($data);
?>

此输出格式为： [“红豆”，“紫花苜蓿”，“多香果”，“杏仁粉”]

我试图对此作出评论。基本上这会产生一个文本输入机器人，当你开始输入时会尝试猜测你想要的是什么成分。

不幸的是，当我将jquery文件改为：

时

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

它不再自动完成。我已经阅读了几十个例子，但我找不到一个基本的1输入自动完成选项，我可以适应。

任何人都可以了解如何将这段短代码改为自动完成，这样我就可以研究并使其适应其全部功能。

我看了所有的jquery-mobile示例，但发现它们缺少我需要的细节，特别是“远程列表视图”，因为它必须填充从mysql源生成的文件，如上面显示的search.php

希望有人可以帮助将其转换为jquery移动使用。

jQuery自动完成更改以使用jQuery-Mobile

0 个答案: