如何使用jQuery的自动完成组合框使用AJAX的JSON数据？ [英] How to use a jQuery autocomplete combobox with AJAX JSON data?

问题描述

我需要做使用组合框下面。

• 选择框的用户可以从搜索城市的默认列表。
• 如果在输入框中的文本用户类型，我需要做一个AJAX调用来获取数据并显示选项给用户。
• 如果数据对于用户的请求牵强，这些城市应该被追加到的选择对话框中的选项

使用 jQuery的自动完成我能够获取用户的JSON数据输入一个字符串，并显示结果。但是，我对如何使用这个组合框整合相当无能。

组合框使用静态数据阵列从搜索，如果我理解这个正确，用途常规的前pression匹配值。但是，我怎么中断它并使用Ajax调用来从服务器上的数据和更新结​​果？

自动完成输入文本框：

  $（#searchDestination）.autocomplete（{
        延迟：500，
        来源：功能（请求，响应）{
            $阿贾克斯（{
                网址：/wah/destinationsJson.action
                数据类型：JSON，
                数据： {
                    长期：request.term
                }，
                键入：POST，
                成功：功能（数据）{
                    如果（data.cities.length == 0）
                        返回响应（[没有找到匹配的城市+ request.term]）;
                    回应（$ .MAP（data.cities，函数（项目）{
                        返回{
                            标签：item.name，
                            值：item.name
                        };
                    }）
                    ）;
                }
            }）;
        }，
        的minLength：2

    }）;
    }）;
 

解决方案

这可以帮助你..的另一个自动完成插件，我用了。

又读<一href="http://stackoverflow.com/questions/10286811/issue-with-json-parsing/10780522#10780522">this

如果要动态加载数据的文本字段，跟上面的插件。否则，如果你想要去的组合框，然后只需加载就绪（），并使用jQuery自动完成插件中的数据！

I need to do the following using a combobox.

• Select box has a default list of cities which the user can search from.
• If a user types in text in the input box, I need to make an ajax call to fetch data and display the options to the user.
• If data was fetched for user's request, those cities should be appended to the options of Select box

Using jQuery autocomplete I am able to fetch json data on user entering a string and displaying the results. However, I am quite clueless on how to integrate this using combobox.

Combobox uses a static data array to search from and if I understand this correctly, uses regular expression to match values. However, how do I interrupt it and uses the ajax call to fetch data from server and update the results ?

Autocomplete for input text box:

$( "#searchDestination" ).autocomplete({
        delay: 500,
        source: function( request, response ) {
            $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: request.term
                },
                type: "POST",
                success: function(data){
                    if(data.cities.length == 0)
                        return response(["No matching cities found for " + request.term]);
                    response( $.map(data.cities, function(item){
                        return{
                            label: item.name,
                            value: item.name
                        };
                    })
                    );
                }
            });
        },
        minLength: 2

    });
    });

解决方案

This may help you.. another autocomplete plugin which I used.

Also read this

If you want to load data dynamically in text field, go with above plugin. Else if you want to go with combo box, then just load the data on ready() and use jquery auto complete plugin!

这篇关于如何使用jQuery的自动完成组合框使用AJAX的JSON数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！