嘿那里,我是一个新手,而且我正在寻找一种像google一样拥有自动完成搜索框的方法。
我搜索过,我发现的最佳前景似乎是http://www.pengoworks.com/workshop/jquery/autocomplete.htm,我在论坛上找到了。那个建议它的人说他用http://code.google.com/p/searchable-behaviour-for-cakephp/来使用它已经死了,因为我已经设法安装了我最后一次尝试找出cakephp的搜索。
问题是,我之前没有使用太多的javascript而且我对于我到底要做什么感到有点困惑。包含自动填充代码的文档没有详细说明我能理解的内容。
如果我们假设我设法正确安装了可搜索的行为,那么任何善良的人都可以向我解释如何进行自动完成工作吗?
它说只是使用:
$("selector").autocomplete(url [, options]);
例如:
$("#input_box").autocomplete("autocomplete_ajax.cfm");
自动填充需要存在id为“input_box”的输入元素。当用户开始在输入框中输入内容时,自动填充程序将使用名为autocomplete_ajax.cfm
q
那就是我没有得到的。我打算把它放在哪里?一旦我把它放在某处,我只需要命名我的一个输入“input_box
”?
答案 0 :(得分:2)
有三个步骤:
1)使用输入字段创建一个完全正常的表单,使用视图中的Html帮助程序:
// app/views/foo_bars/search.ctp
<?php
echo $this->Form->create('FooBar');
echo $this->Form->input('field');
echo $this->Form->end('Submit');
?>
2)触发了jquery自动完成:
// app/views/foo_bars/search.ctp
<?php
echo $this->Html->scriptBlock(
.'$("#FooBarField").autocomplete({'
.'source:"/foo_bars/find",'
.'delay: 100,'
.'select:function(event,ui){$(this).parent().parent().children("input").val(ui.item.id);},'
.'open:function(event,ui){$(this).parent().parent().children("input").val(0);}'
.'});'
array('inline' => false));
?>
3)通过控制器查询数据库以获取可能的值:
// app/controllers/foo_bars_controller.php
<?php
public function find() {
if ($this->RequestHandler->isAjax()) {
$this->autoLayout = false;
$this->autoRender = false;
$this->FooBar->recursive = -1;
$results = $this->FooBar->find('all', array('fields' => array('id', 'name'), 'conditions' => array('name LIKE "%'.$_GET['term'].'%"')));
$response = array();
$i = 0;
foreach($results as $result){
$response[$i]['value'] = $result['FooBar']['name'];
$response[$i]['id'] = $result['FooBar']['id'];
$i++;
}
echo json_encode($response);
}
}
?>
答案 1 :(得分:-2)
echo $ this-&gt; Html-&gt; scriptBlock(
<强> 强> $( “#FooBarField”)。自动完成({'
.'source:"/Search/find",'
.'delay: 100,'
.'select:function(event,ui){$(this).parent().parent().children("input").val(ui.item.id);},'
.'open:function(event,ui){$(this).parent().parent().children("input").val(0);}'
。 '}); <强>'。强>
array('inline' => false));