bootstrap typeahead转换为ajax

时间:2013-12-31 13:49:24

标签: ajax bootstrap-typeahead

我有一个带有硬编码数据的工作样本。我正在尝试使用bootstrap-typehead将其转换为ajax调用。我不确定我做错了什么,但是consol正在发生错误。有人可以帮忙吗?谢谢!

//错误

日志:[对象对象],[对象对象],[对象对象],[对象对象] SCRIPT438:Object不支持属性或方法'toLowerCase'

JSFIDDLE

$('#selectAgent').typeahead({
     source: function (query, process) {
        return $.post('/eBus/EbusinessAgentServlet', { query: query }, function (data) {
        console.log(data)
        return process(data);
        });
    }
    ,
    minLength: 2,
    highlighter: formatRecord,
    updater: function (item) {
    $('#selectAgent').attr('data-agent-id', item.split('#')[1]);
    return formatRecord(item);
    }

});

2 个答案:

答案 0 :(得分:0)

现在正在运作。

var nameIdMap = {};

  $('#selectAgent').typeahead({
        source: function (query, process) {
            return $.ajax({
                dataType: "json",
                url: '/eBus/EbusinessAgentServlet',
                data: 'q=' + query,                 
                type: 'POST',
                success: function (json) {
                console.log(json)
                    process(getOptionsFromJson(json));
                }
            });
        },
        minLength: 2,
        updater: function (item) {
            console.log('selected id'+nameIdMap[item]);
            return item;
        }
    });


 });

  function getOptionsFromJson(json) {
$.each(json, function (i, v) {
    nameIdMap[v.fname] = v.agentID;
});

return $.map(json, function (n, i) {
    return n.fname;
});
 }
  function getAjaxRequestData(query) {
return {
    json: getJsonData(query),
    delay: 1
};
// in the question this would be:
// return 'q='+query;
 }

答案 1 :(得分:0)

我认为,因为你使用的是ajax但javascript是asyn(默认)所以你可以尝试使用ajax这样设置async:false。请帮助。

public class MainActivity extends AppCompatActivity {

private LineChart mChart;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Bygger en ny line chart.
    mChart = (LineChart) findViewById(R.id.chart);;

    // Tilpasse LineChart til behov.
    mChart.setDescription("");
    mChart.setNoDataTextDescription("No data for the moment");

    // Aktiver værdi fremhævning.
    mChart.setHighlightEnabled(true);

    // Aktiver berørings muligheder.
    mChart.setTouchEnabled(true);

    // Aktiver skaler og træk muligheder.
    mChart.setDragEnabled(true);
    mChart.setScaleEnabled(true);
    mChart.setDrawGridBackground(false);

    // Aktiver pinch-to-zoom.
    mChart.setPinchZoom(true);

    // Baggrund farve.
    mChart.setBackgroundColor(Color.BLACK);

    // DATA
    LineData data = new LineData();
    data.setValueTextColor(Color.WHITE);

    LineData data2 = new LineData();
    data2.setValueTextColor(Color.WHITE);

    // Tilføj DATA til LineChart
    mChart.setData(data);
    mChart.setData(data2);

    // Legend objekt.
    Legend l = mChart.getLegend();

    // Tilpasse legend.
    l.setForm(Legend.LegendForm.LINE);
    l.setTextColor(Color.WHITE);


    XAxis x1 = mChart.getXAxis();
    x1.setTextColor(Color.WHITE);
    x1.setDrawGridLines(false);
    x1.setAvoidFirstLastClipping(true);
    x1.setPosition(XAxis.XAxisPosition.BOTTOM);


    YAxis y1 = mChart.getAxisLeft();
    y1.setTextColor(Color.WHITE);
    y1.setAxisMaxValue(140f);
    y1.setDrawGridLines(true);


    YAxis y12 = mChart.getAxisRight();
    y12.setEnabled(false);


    YAxis leftAxis = mChart.getAxisLeft();

    // Instantierer limit lines
    LimitLine ll = new LimitLine(50f, "Kritisk Blod Tryk");
    ll.setLineColor(Color.RED);
    ll.setLineWidth(2f);
    ll.setTextColor(Color.RED);
    ll.setTextSize(12f);

    LimitLine ll1 = new LimitLine(80f, "Normalt Blod Tryk");
    ll1.setLineColor(Color.YELLOW);
    ll1.setLineWidth(2f);
    ll1.setTextColor(Color.YELLOW);
    ll1.setTextSize(12f);

    LimitLine ll2 = new LimitLine(120f, "Fint Blod Tryk");
    ll2.setLineColor(Color.GREEN);
    ll2.setLineWidth(2f);
    ll2.setTextColor(Color.GREEN);
    ll2.setTextSize(12f);

    leftAxis.addLimitLine(ll);
    leftAxis.addLimitLine(ll1);
    leftAxis.addLimitLine(ll2);




}

@Override
protected void onResume() {
    super.onResume();

    // Simulerer real-time data
    new Thread(new Runnable() {
        @Override
        public void run() {
            for (int i = 0; i < 100; i++) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        addEntry();
                    }
                });

                try {
                    Thread.sleep(600);
                } catch (InterruptedException e) {
                    // manage error
                }
        }
    }
    }).start();
}

private void addEntry() {
    LineData data = mChart.getData();

    if (data != null) {
        LineDataSet set = data.getDataSetByIndex(0);

        if (set == null) {
            set = createSet();
            data.addDataSet(set);
        }

        data.addXValue("dd/mm");
        data.addEntry(
                new Entry((float) (Math.random() * 120) + 5f, set
                        .getEntryCount()), 0);

        mChart.notifyDataSetChanged();

        mChart.setVisibleXRange(6, 6);

        mChart.moveViewToX(data.getXValCount() - 7);
    }


}


private LineDataSet createSet() {
    LineDataSet set = new LineDataSet(null, "SPL Db");
    set.setDrawCubic(true);
    set.setCubicIntensity(0.2f);
    set.setAxisDependency(YAxis.AxisDependency.LEFT);
    set.setColor(ColorTemplate.getHoloBlue());
    set.setCircleColor(ColorTemplate.getHoloBlue());
    set.setLineWidth(2f);
    set.setCircleSize(4f);
    set.setFillAlpha(65);
    set.setFillColor(ColorTemplate.getHoloBlue());
    set.setHighLightColor(Color.rgb(244, 117, 177));
    set.setValueTextColor(Color.WHITE);
    set.setValueTextSize(10f);


    return set;


}




}