【问题标题】:jQuery Autocomplete From MySQL Result (No JSON - If Possible)来自 MySQL 结果的 jQuery 自动完成(无 JSON - 如果可能)
【发布时间】:2012-09-26 05:04:03
【问题描述】:

我需要在我的网站上具有自动完成功能,但我不是 JSON 专家。我从不处理 JSON,所以我希望我仍然可以从普通的 MySQL 结果中自动完成。

但从我在这里看到的情况来看:http://jqueryui.com/demos/autocomplete/ 我看不到任何从 MySQL 结果中获取自动完成的可能性。是真的吗?

【问题讨论】:

标签: jquery mysql


【解决方案1】:

你也可以简单地使用php

check here

这是 ajax 演示 :)

download

【讨论】:

    【解决方案2】:

    您只需要进行 AJAX 调用并获取搜索结果,然后将它们作为 JSON 发送回客户端。然后只需将其与自动完成文本框绑定即可。

    要使用的 jQuery 插件是http://docs.jquery.com/UI/API/1.8/Autocomplete

    Example- A textbox with ID 'txtlocation' is added with autocomplete functionality here.
    $(document).ready(function(){
    
       $("#txtlocation").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/PublicHome/AutoPopulateLocation", //Call to Server Side 
                data: "{ 'searchText': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                value: item.Suburb 
    
                        }))
                    },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
    
                }
            });
        },
        open: function (event, ui) {
            $(this).autocomplete("widget").css({
                "width": 344,
                "font-size": 11,
                "font-family": "Arial"
            });
          }
       });
    
    
    });
    

    【讨论】:

    • 如果我错了,请纠正我: url: "/PublicHome/AutoPopulateLocation", //Call to Server Side >> 意味着我必须像这样引用我的 php 文件 url: "search.php " 而那个 search.php 所做的实际上是将 MySQL 输出转换为 JSON 格式,是你的意思吗?
    • 以及这一行数据上的“搜索文本”:“{ 'searchText': '" + request.term + "' }" 指的是什么?
    猜你喜欢
    • 2012-06-05
    • 2016-07-08
    • 1970-01-01
    • 1970-01-01
    • 2011-01-04
    • 1970-01-01
    • 1970-01-01
    • 2011-09-08
    • 2014-07-22
    相关资源
    最近更新 更多