jQuery自动完成功能不起作用？

Posted 2023-05-09

【中文标题】jQuery自动完成功能不起作用？

【英文标题】：jQuery autocomplete function not working?

【发布时间】：2013-08-12 09:21:18

【问题描述】：

我有一个页面，用户可以在其中单击一个显示“添加技能”的按钮，然后它应该会显示一个输入框，您可以在其中输入您的技能，它应该会显示另一个输入框，您的技能水平应该会出现，然后一个水平滑块，您可以在其中选择您的技能水平。

我在数据库中有一个名为“skill_list”的表，它有两列：id 和 name。名称字段将包含数千种技能供您选择。

我还需要仅在数据库中存在该技能时才发布表单的功能。

我要问的是如何根据我当前的代码让自动完成功能与 jQuery 一起工作，或者有人可以为我稍微重写一下吗？

目前我有以下代码，它在萤火虫控制台中没有引发任何错误，一切正常，但我真的不确定我必须做什么才能让它工作：

skills.php - auto() 函数（控制器）：

public function auto()

    $skill = $_POST['skill-0'];

    $query = $this->db->query('SELECT * from skill_list WHERE name LIKE "'.$skill.'%" ORDER by name ASC LIMIT 10');

    $data = array();

    if ( $query && mysql_num_rows($query) )

        while( $row = mysql_fetch_array($query, MYSQL_ASSOC) )

            $data[] = array(

                'label' => $row['name'],
                'value' => $row['id']

            );

        

    

    echo json_encode($data);
    flush();

skills.php（查看）

<form method="post" action="skills/add" id="container">  

<script>

$.fn.addSlide = function () 
return this.each(function () 
    var $this = $(this),
        $num = $('.slide').length++,
        $name = $('<input type="text" class="inputField" id="autoskill" name="skill-' + $num + '" placeholder="What\'s your skill?"></div>'),
        $slide = $('<br><div class="slide" id="slider-' + $num + '"></div><br>'),
        $amt = $('<input name="amount-' + $num + '" id="amount-' + $num + '" class="inputField" readonly placeholder="Slide to select this skill level..."/><br>');
    $this.append($name).append($amt).append($slide);
    $slide.slider(
        value: 0,
        min: 0,
        max: 5,
        step: 1,
        slide: function (event, ui) 
            $amt.val(ui.value); 
        
    );
);


$('body').on('click', '.addNew', function(event) 
event.preventDefault();
$('#newFields').addSlide();
); 

var count = 0;  

$(document).ready(function()   

$('#autoskill').autocomplete(
    source:'skills/auto', minLength:2
);

$('.addNew').click( function(event)
    event.preventDefault();
    $('#length').html(count);       
    count++;
);

$('.submitButton').click( function(event)
    $('#container').append('<input type="hidden" name="count" value="' + count + '">');
);

);



</script>

<button class="addNew submitButton"> Add a Skill </button><br>

<div id="newFields"></div>

<input type="submit" class="submitButton" value="Save Skills">

</form>

希望有人能帮忙，谢谢！

【问题讨论】：

@putvande 您对可能出现的问题有任何想法吗？

应该是skills/auto.php 而不是skills/auto？

@putvande 我正在使用 codeigniter，所以技能是文件，而 auto 是该文件中的一个函数。基于此对文件路径有什么建议吗？

在调用自动​​完成功能之前添加 console.log($('#autoskill')) 并告诉我输出是什么。

@WooCaSh 它只是在控制台中使用 chrome [context: document, selector: "#autoskill", jquery: "1.9.1", constructor: function, init: function…]跨度>

【参考方案1】：

把$name变成这个

$name = $('<input type="text" class="inputField" id="autoskill-'+$num+'" name="skill-' + $num + '" placeholder="What\'s your skill?"></div>'),

之后

$this.append($name).append($amt).append($slide);

添加

$('#autoskill'+$num).autocomplete(
    source:'skills/auto', minLength:2
);

并从您的准备功能中完全删除自动完成行

然后为 json 制作

 $data[] = array(

                'label' => $row['name'],
                'value' => $row['id']

            );

进入

$data[$row['id']]=$row['name']

【讨论】：

这仍然没有任何作用。真的很奇怪，我没有得到任何迹象。

尝试 $('.inputField').autocomplete( source:'skills/auto', minLength:2 );而是

好的，我们现在已经到了某个地方，但是它说

听起来 Skill.php 有问题。要查看是否可以将问题隔离到技能.php，请使用我之前的 sampleData 数组作为自动完成的源并查看它是否正常运行

是的，我只是在那里做了，它工作得很好，所以它肯定是 php 脚本有问题