使用自动完成功能筛选SharePoint中jQuery列表中的列表

时间:2011-03-07 19:36:28

标签: jquery sharepoint

我已加载来自http://jqueryui.com/demos/autocomplete/#combobox的自动完成组合框脚本 它出现在我的清单中。

在它下面,我有一个可以正常使用的列表:  

  • function processResult(xData,status){             $(xData.responseXML).find(“List”)。each(function(){          $(“#data”)。append(+ $(this).attr(“Title”)+);             });         }
  • 感谢Jan Tielens Bloggings: http://weblogs.asp.net/jan/archive/2009/04/09/calling-the-sharepoint-web-services-with-jquery.aspx

    如果选择了某些内容,如何让列表实际过滤?我假设它在$(this).attr()中,但似乎没有任何效果。

    提前为DAY1新手问题道歉。

    由于

    2 个答案:

    答案 0 :(得分:3)

    使用SPServices并使用自动填充中的select选项:

    <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/jquery.SPServices-0.5.8.js"></script>
    
    <script type="text/javascript">
    $(document).ready (function() {
        $().SPServices({
            operation: "GetListItems",
            async: true,
            listName: "Resources",
            CAMLViewFields: "<ViewFields>" +
                "<FieldRef Name='Title' />" +
                "<FieldRef Name='resource_link' />" +
                "<FieldRef Name='image_url' />" +
                "</ViewFields>",
            completefunc: AttachAutoComplete
        });
    
        function AttachAutoComplete(xmlResponse) {
            var domElementArray = $( "[nodeName=z:row]", xmlResponse.responseXML );
    
            var dataMap = domElementArray.map(function() {
                return {
                    value: $(this).attr('ows_Title'),
                    url: $(this).attr('ows_resource_link'),
                    image_url: $(this).attr('ows_image_url')
                };
            });
    
            var data = dataMap.get();
    
            $("input#inputAutoComplete").autocomplete({
                source: data,
                formatItem: function(row){
                    if(row){
                        return "<table><tr><td><img src=\"" + row.image_url + "\" border=\"0\" /></td><td>"+ row.value + " 55</td></tr></table>";
                    }
                },
                select: function(e, ui){
                    window.open(ui.item['url']);
                }
            });
        }
    </script>
    

    答案 1 :(得分:1)

    即使使用标准输入,也可以触发onkeyup。它看起来像是:

    <input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />