将PHP数据插入JavaScript - 使用动态自动完成魔术搜索插件

Question

我想弄清楚this插件

下面的代码是作为插件示例给出的

<section>
<input class="magicsearch" id="basic" placeholder="search names...">
</section>
    <script>
        $(function() {
            var dataSource = [
                {id: 1, firstName: 'Tim', lastName: 'Cook'},
                {id: 2, firstName: 'Eric', lastName: 'Baker'},
                {id: 3, firstName: 'Victor', lastName: 'Brown'},
                {id: 4, firstName: 'Lisa', lastName: 'White'},
                {id: 5, firstName: 'Oliver', lastName: 'Bull'},
                {id: 6, firstName: 'Zade', lastName: 'Stock'},
                {id: 7, firstName: 'David', lastName: 'Reed'},
                {id: 8, firstName: 'George', lastName: 'Hand'},
                {id: 9, firstName: 'Tony', lastName: 'Well'},
                {id: 10, firstName: 'Bruce', lastName: 'Wayne'},
            ];
            $('#basic').magicsearch({
                dataSource: dataSource,
                fields: ['firstName', 'lastName'],
                id: 'id',
                format: '%firstName% · %lastName%',
                multiple: true,
                multiField: 'firstName',
                multiStyle: {
                    space: 5,
                    width: 80
                }
            });
        });
    </script>

我有一个工作的PHP代码，它将数据库中的两行回显到一个多选框。

<?php
$usrqry = "SELECT userId, CONCAT(userFirst,' ',userLast) AS user FROM users WHERE userId != 1";
$usrres = mysqli_query($mysqli, $usrqry) or die('-1'.mysqli_error());
?>
<select id="users" multiple class="form-control selectall" size="4" name="userId[]">
<option value="all" selected><?php echo $allUsersOpt; ?></option>
<?php
while ($u = mysqli_fetch_assoc($usrres)) {
echo '<option value="'.$u['userId'].'">'.$u['user'].'</option>';
}
?>
</select>

我试图让这个PHP代码与上面的JavaScript一起工作，我尝试的每个解决方案都没有结果

Answer 1

这将有效......

<section>
<input class="magicsearch" id="basic" placeholder="search names...">
</section>
    <script>
        $(function() {
            var dataSource =[ 
            <?php
                $usrqry = "SELECT userId, CONCAT(userFirst,' ',userLast) AS user FROM users WHERE userId != 1";
                $usrres = mysqli_query($mysqli, $usrqry) or die('-1'.mysqli_error());

                while ($u = mysqli_fetch_assoc($usrres)) {
                echo "{id: '".$u['userId']."', name: '".$u['user']."'},";
                }
            ?>
            ];
            $('#basic').magicsearch({
                dataSource: dataSource,
                fields: ['id', 'name'],
                id: 'id',
                format: '%name%',
                multiple: true,
                multiField: 'name',
                multiStyle: {
                    space: 5,
                    width: 80
                }
            });
        });
    </script>

Answer 2

从php获取数据，首先从db获取数据

<?php
    $usrqry = "SELECT userId, CONCAT(userFirst,' ',userLast) AS user FROM users WHERE userId != 1";
    $usrres = mysqli_query($mysqli, $usrqry) or die('-1'.mysqli_error());
    $response = array();
    while ($u = mysqli_fetch_assoc($usrres)) {
        $response[] = ["id"=>$u['id'],"user"=>$u['user']];
    }
?>

然后以json的形式获取javascript中的数据

$(function() {
    var dataStr = "<?php echo json_encode($response); ?>";
    var dataSource = JSON.parse(dataStr);
});

如果使用外部js，则将数据放入隐藏输入，并从该文本框中获取数据作为字符串并在json中解码。

或者最好的编程是使用AJAX，从那里使用外部js。