Silverstripe搜索表单上的自动建议文本字段？答案

【问题标题】：Auto-suggest text field on search form for Silverstripe?Silverstripe搜索表单上的自动建议文本字段？
【发布时间】：2017-05-22 14:33:49
【问题描述】：

https://www.tripadvisor.com.ph/Hotels

在哪里输入您的城市或酒店。当您开始输入时，建议会显示在下方。

我想在我的搜索表单上使用相同的功能。关于如何做到这一点的任何想法？

这是我的代码：

public function Form()
{
    $QualificationTypes = array("Any degree");
    foreach (QualificationType::get()->filter("ParentID", 0)->sort("Name") as $QualificationType) {
        $QualificationTypes[$QualificationType->Name] = $QualificationType->Children()->sort("Name")->map()->toArray();
    }


    $fields      = new FieldList(array(
        GroupedDropdownField::create("QualificationTypeID", "", $QualificationTypes)->setAttribute('placeholder','Type of degree')->setEmptyString("Any degree")->addExtraClass("chosen-select"),
        DropdownField::create("CourseName", "", Qualification::get()->sort("Name")->map("Name","Name"))->setAttribute('placeholder','Course')->setEmptyString("Any Course")->addExtraClass("chosen-select"),
        DropdownField::create("CityID", "", City::getCitiesWithInstitutions()->sort("Name")->map())->setAttribute('placeholder','City')->setEmptyString("Any city")->addExtraClass("chosen-select")
    ));
    $actions     = new FieldList(array(
        FormAction::create("doSearch")->setTitle("Find a College")
    ));
    $validator   = ZenValidator::create();
    $validator->addRequiredFields(array(
        'QualificationTypeID' => 'Please select a Degree'
    ));
    $form        = new Form($this, 'findthem', $fields, $actions, $validator);
    $form->addExtraClass("form-inline college-search")->setAttribute("data-toggle", "validator");
    $form->loadDataFrom($this->request->postVars());
    $form->disableSecurityToken();
    return $form;
}

【问题讨论】：

您是否搜索过任何教程或尝试过什么？如果你有，我想你最好说明你做了什么，你在哪一步失败了。
你看到我上面贴的代码了吗？这就是我到目前为止在一位朋友的帮助下所做的事情，他有足够的空闲时间来帮助我。尝试将课程下拉菜单转换为自动建议文本字段。
您是否有任何自定义 javascript，或者您是否完全依赖 Chosen 来实现此功能？可能值得一看 how silverstripe-tagfield 和 a similar thing。
不确定。我做这段代码的能力非常有限，尤其是在这个框架上。对我来说最好的学习方式是根据我拥有的代码给我代码或一些示例，并告诉我它是如何工作的。
好的，您可以使用该模块并将选项设置为您的自定义 DataList 而不是 Tags

标签： php jquery ajax silverstripe

【解决方案1】：

您提供的 Hotels.com 示例与您尝试做的略有不同，因为您有多个字段，这使得它变得更加困难。

例如，假设您有一个“搜索大学”字段，您可以使用 Jquery Autocomplete 之类的内容！然后构建一个简单的SilverStripe function！根据用户输入的内容返回对象。

我建议您阅读上面有关 SilverStripe 控制器的页面，因为您需要了解它们的功能，例如路由和操作。

下面是自动完成集成的一个简单示例。 SilverStripe 函数需要处理后端。

$('.product-search').autocomplete({
    serviceUrl : pageURL + '/CollegeSearch',
    minChars : 3,
    onSearchStart : function(input) {
        dataLayer.push({
            'event': 'searchKeyword',
            'eventLabel': input.query
        });
    },
    onSelect : function(suggestion) {
        dataLayer.push({
            'event': 'searchProduct',
            'eventLabel': suggestion.value
        });
        window.location = suggestion.data;
    }
});

还有一个超级简单的PHP函数

public function Index()
{
    if ($query = $this->request->getVar('query')) {
        $colleges = $this->GetColleges($query); // another function that does a search
        $results = array();
        if($colleges->count() > 0){
            foreach($colleges as $college){
                $results[] = array(
                                'value' => $college->Title,
                                'data' => $college->AbsoluteLink()
                            );
            }
        }
        $suggestions = array('suggestions' => $results);
        $converted = convert::array2json($suggestions);
        return $converted;
    }
    return false;
}

【讨论】：