时间戳

首页 > 解决方案 > 选择文本输入上的标签，但在不更改文本值的情况下发布值

jquery - 选择文本输入上的标签，但在不更改文本值的情况下发布值

问题描述

我希望能够使用自动完成功能来搜索标签列表，然后发布值。这已成功完成。问题是选择标签时，它会更改为值。因此，用户选择了一个自动完成的值，比如 burger，但在选择时，它会更改为 id，比如 18。在帖子中，它实际上发送了正确的信息，即 id。当人们在选择时看到一个数字而不是一个值时，这可能会让他们感到困惑。第一次使用jquery，如果它很简单，请原谅我。

数据库提取 get_meals.php：

while($row = $stmt->fetch()) {
$return_arr[] = array('value'=>$row['food_id'], 'label' => $row['food']);
}

这是jQuery：

 <script type="text/javascript">
   $(function() {
   $(".auto").autocomplete({
       source: "get_meals.php",
       minLength: 0
   });
   });
   </script>

尝试过类似的东西：

select: function (event, ui) {
                event.preventDefault();
                $(this).val(ui.item.label);

    focus: function(event, ui) {
        $("#search").val(ui.item.label);
        return false; // Prevent the widget from inserting the value.

select: function(event, ui) {
    $('#search').val(ui.item.label);
    $('#searchval').val(ui.item.value);
    return false; // Prevent the widget from inserting the value.
    },


 focus: function(event, ui) {
            $("#search").val(ui.item.label);
            return false; // Prevent the widget from inserting the value.

标签： jqueryautocomplete

解决方案

我不得不添加一个隐藏字段：

<input type="hidden" id="food_id" name="food_id" value="" class='auto'>
<input type='text' id="food" name='food' value="" class='auto'>

然后自动完成以下内容：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".auto").autocomplete({
            source: "add_meals_frm_.php",
            minLength: 0,

            select: function(event, ui) {
                $('#food_id').val(ui.item.value);
                event.preventDefault();
                $("#food").val(ui.item.label);
            }


       });
    });
</script>

推荐阅读