Question

一直在研究Jquery UI的自动完成功能（v1.8.5），并意识到在发送额外参数和拍摄额外数据以自动填充其他字段方面缺乏文档。我的工作，但严肃地说，似乎是这样的黑客...有关如何改善这一点的任何想法？

        <script type="text/javascript">

        var optofirst = {

            width: 375,

            // doing "$(this)" here fails

            source: function( request, response ) {

            // grab the calling element
            // "$(this)" here works but ya gotta dig to get to the ID

            var cat = $(this);
            var callid = cat[0].element.context.id; //digging away

            $.ajax({

                // doing "$(this)" here fails

                url: "automagic.php",
                dataType: "json",
                data: {
                term : request.term,

                //send its ID to the php script
                grab : callid,
            },

            success: function( data ) {
                response( $.map( data, function( item ) {
                return {

                // start assigning item handles to the response

                label: item.first,
                value: item.first,
                last: item.last,
                }
                }));
            }
            });
        },
            select: function( event, ui ) {
                console.log( ui.item ?
                "Selected: " + ui.item.last :
                "Nothing selected, input was " + this.value);

                // make #lname have the value last name
                // the "item" in this case appears to get its info from the handles assign in "success:"

                $("#flyover #lname").attr("value",ui.item.last);
            },
        minLength: 2,
        };

        $("#flyover #fname").autocomplete(optofirst);

        </script>

Answer 1

您可以使用source属性。设置函数而不是url。您只需要编辑url并替换customData行以获取要发送到服务器的任意数量的自定义属性。例如：

        $(this).autocomplete({
            source: function(request, response) {
                $.ajax({
                  url: 'data.php',
                  dataType: "json",
                  data: {
                    term : request.term,
                    customData : $('#something').val()
                  },
                  success: function(data) {
                    response(data);
                  }
                });
            },
            minLength: 3}, {

        });

Answer 2

一般的想法对我来说很好。您的代码非常接近jQueryUI's custom data and display demo。

但是你可以改进一些事情：

// doing "$(this)" here fails在自动完成和AJAX调用的选项对象中，因为JavaScript中的this在对象文字中没有意义;它包含函数调用的上下文（有关this的详细解释，请参阅this question）;
在source函数内，this有效，因为现在它周围有一个函数。 this有上下文。
而不是：
```
var callid = cat[0].element.context.id; //digging away
```
你可以写：
```
var calid = this.element.attr('id');
```
这是因为在这种情况下this已经是一个jQuery对象。 $(this)是多余的。此外，element属性也是jQuery对象，因此您只需使用id

attr()

其余的对我来说没问题。看看我引用的演示 - 它与你想要完成的事情做了类似的事情。

Answer 3

我真的很想在rails 3.1中使用coffeescript 继承人gist for it on github

Jquery UI自动完成额外参数和自动填充 - 一个令人沮丧的解决方案

3 个答案: