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

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

您可以使用源属性。设置一个函数而不是 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 的自定义数据和显示演示。

不过，有一些事情您可以改进：

1. // 在自动完成选项对象和 AJAX 调用中执行“$(this)”都会失败，因为 this在 JavaScript 中，对象字面量没有意义；它包含函数调用的上下文（请参阅这个问题 对此进行了很好的解释）；
2. 在 source 函数中，this 可以工作，因为现在它周围有一个函数。 this 有一个上下文。

3. 而不是：

   var callid = cat[0].element.context.id; //挖掘
   

   你可以这样写：

   var calid = this.element.attr('id');
   

   这是因为在本例中 this 已经是一个 jQuery 对象。 $(this) 是多余的。此外，element 属性也是一个 jQuery 对象，因此您可以使用 attr()

   访问 id

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

Answer 3

我真的很想在 Rails 3.1 中使用 CoffeeScript 来做到这一点
这是 github 上的要点